表单验证无法实现怎么解决
表单验证不成功怎么解决呀？
验证密码不能为空和密码不能小于8位，如果不符合条件没有出现错误提示
如图，是函数代码
<script>
function formcheck() {
//验证用户名文本框是否为空
if (document.login.nickname.value == "") {
alert("请输入用户名！");
document.login.username.focus();
return false;
}
//验证密码文本框是否为空
if (document.login.pwd.value == "") {
alert("请输入密码！");
document.login.pwd.focus();
return false;
}
//验证密码是否是8位
if (document.login.pwd.value.length < 8) {
alert("请输入大于或等于8位数密码！");
document.login.pwd.focus();
return false;
}
return true;
}
</script>
下面是表单代码
<form name="login" action="pwdchange.jsp" method="post" target="_blank" id="form" onsubmit="return formcheck();">
<div id="" class="col-md-6">
<input type="password" class="form-control" name="pwd" id="pwd" placeholder="请输入修改密码" >
</div>
<input type="submit" value="保存" class="btn btn-primary">
</form>
form需要走校验规则的话不能自动提交，我改了下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>页面名称</title>
</head>
<body>
<form
name="login"
action="pwdchange.jsp"
target="_blank"
method="post"
id="form"
onsubmit="return false;"
>
<div id="" class="col-md-6">
<input
type="test"
class="form-control"
name="nickname"
id="nickname"
placeholder="请输入账号"
/>
<input
type="password"
class="form-control"
name="pwd"
id="pwd"
placeholder="请输入修改密码"
/>
</div>
<input
type="submit"
value="保存"
class="btn btn-primary"
onclick="formcheck()"
/>
</form>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
function formcheck() {
//验证用户名文本框是否为空
if (document.login.nickname.value == "") {
alert("请输入用户名！");
document.getElementById("nickname").focus();
return false;
}
//验证密码文本框是否为空
if (document.login.pwd.value == "") {
alert("请输入密码！");
document.getElementById("pwd").focus();
return false;
}
//验证密码是否是8位
if (document.login.pwd.value.length < 8) {
alert("请输入大于或等于8位数密码！");
// document.login.pwd.focus();
document.getElementById("pwd").focus();
return false;
}
var form = document.getElementById("form");
form.submit();
}
</script>
</body>
</html>
给你改好了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>个人站点</title>
<!-- 新 Bootstrap5 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
<!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
<script src="https://cdn.staticfile.org/popper.js/2.9.3/umd/popper.min.js"></script>
<!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>
<script>
function formcheck() {
//验证密码文本框是否为空
if (document.login.pwd.value == "") {
alert("请输入密码！");
document.login.pwd.focus();
return false;
}
//验证密码是否是8位
if (document.login.pwd.value.length < 8) {
alert("请输入大于或等于8位数密码！");
document.login.pwd.focus();
return false;
}
document.getElementById("form").submit();
return true;
}
</script>
</head>
<body>
<form name="login" action="pwdchange.jsp" method="post" target="_blank" id="form">
<div id="" class="col-md-6">
<input type="password" class="form-control" name="pwd" id="pwd" placeholder="请输入修改密码" >
</div>
<input type="button" value="保存" class="btn btn-primary" onclick="return formcheck();">
</form>
</body>
</html>