需求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="reg-form" action="#" method="post">
用户名：<input type="text" name="username" id="username"><br>
<span id="username_err" class="err_msg" style="display: none">用户名输入有误</span><br>
密码：<input type="password" name="password" id="password"><br>
<span id="password_err" class="err_msg" style="display: none">密码输入有误</span><br>
<input type="submit">
</form>
<script>
// 1. 验证用户名是否符合规则
// 1.1 获取用户名的输入框
var usernameInput = document.getElementById("username");
// 1.2 绑定onblur事件 失去焦点
usernameInput.onblur = checkUsername;
function checkUsername(){
// 1.3 获取用户输入的用户名
var username = usernameInput.value.trim(); //去除空格
var flag1 = username.length >= 6 && username.length <= 12;
// 1.4 判断用户名是否符合规则，长度6-12
if(flag1){
document.getElementById("username_err").style.display = "none";
}else{
document.getElementById("username_err").style.display = "";
}
return flag1;
}
// 1. 验证密码是否符合规则
// 1.1 获取密码的输入框
var passwordInput = document.getElementById("password");
// 1.2 绑定onblur事件 失去焦点
passwordInput.onblur = checkPassword;
function checkPassword(){
// 1.3 获取用户输入的密码
var password = passwordInput.value.trim(); //去除空格
var flag2 = password.length >= 6 && password.length <= 12;
// 1.4 判断密码是否符合规则，长度6-12
if(flag2){
document.getElementById("password_err").style.display = "none";
}else{
document.getElementById("password_err").style.display = "";
}
return flag2;
}
// 提交验证
// 1. 获取表单对象
var regForm = document.getElementById("reg-form");
// 2. 绑定 onsubmit 事件
regForm.onsubmit = function (){
// 挨个判断每一个表单项是否都符合要求，如果有一个不符合，则返回false
return checkPassword() && checkUsername();
}
</script>
</body>
</html>标签：username,用户名,验证,JavaScript,表单,length,var,usernameInput From： https://www.cnblogs.com/1873cy/p/16741291.html