关于表单验证的简单实践
注意点：
1.函数的使用
如果在script中需要调用某个function，例如checkUserName(),请确保在定义该函数时的写法为
usernameInput.onblur = checkUserName;
function checkUserName() {
如果写成
usernameInput.onblur = function checkUserName() {，
则无法调用他
2.document.方法使用
注意区分html中各个元素的name,id,class属性，一般用document.getElementById()获取单个特定对象,尽量不要使用name,class。
区分document.getElementsByName(),它多带了一个s，很容易写错。另外还有document.getElementsByClassName()和
document.getElementsByTagName()。写错时很难检查。可以在网页中用检查代码功能中的console里查看错误信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单验证</title>
</head>
<body>
<form action="#" id="for1" align="center" method="GET">
<h2>欢迎注册</h2>
<h4>已有账号，登录</h4>
用户名：<input type="text" name="tex1" id="username"><br>
<span id="username_err" class="err_msg" style="display: none">用户名格式错误</span><br>
密码：<input type="password" name="tex2" id="password"><br>
<span id="password_err" class="err_msg" style="display: none">密码格式错误</span><br>
手机号：<input type="text" name="tex3" id="tel"><br>
<span id="tel_err" class="err_msg" style="display: none">密码格式错误</span><br>
<input type="submit" value="注册"><br>
<input type="button" onclick="on()" id="99" value="判断">
</form>
<script>
//1.验证用户名
// var usernameInput = document.getElementById("username");
//1.2 绑定onblur事件 失去焦点
// usernameInput.onblur = checkUserName;
var usernameInput = document.getElementById("username");
// alert(usernameInput)
//2.绑定onblur事件 失去焦点
usernameInput.onblur = checkUserName;
function checkUserName() {
//3.获取用户输入的用户名
var username = usernameInput.value.trim();
//4.判断用户名长度是否符合规则
var flag = username.length >= 6 && username.length <= 12;
if (flag) {
//符合规则
document.getElementById("username_err").style.display = 'none';
} else {//不符合规则
document.getElementById("username_err").style.display = '';
}
return flag;
}
//2.密码提示信息
var passwordInput = document.getElementById("password");
// alert(usernameInput)
//2.绑定onblur事件 失去焦点
passwordInput.onblur = checkPassword;
function checkPassword() {
//3.获取用户输入的用户名
var password = passwordInput.value.trim();
//4.判断用户名长度是否符合规则
var flag = password.length >= 6 && password.length <= 12;
if (flag) {
//符合规则
document.getElementById("password_err").style.display = 'none';
} else {//不符合规则
document.getElementById("password_err").style.display = '';
}
return flag;
}
var telInput = document.getElementById("tel");
// alert(usernameInput)
//2.绑定onblur事件 失去焦点
telInput.onblur = checkTel;
function checkTel() {
//3.获取用户输入的用户名
var tel = telInput.value.trim();
//4.判断用户名长度是否符合规则
flag = (tel.length == 11);
if (flag) {
//符合规则
document.getElementById("tel_err").style.display = 'none';
} else {//不符合规则
document.getElementById("tel_err").style.display = '';
}
return flag;
}
//4.判断提交表单前是否所有信息都符合规范
// function on() {
// var flag = (checkUserName() && checkPassword() && checkTel());
// alert("111");
// alert(flag);
// }
var regForm = document.getElementById("for1");
regForm.onsubmit = function checkAll() {
var flag = (checkUserName() && checkPassword() && checkTel());
return flag;
}
</script>
</body>
</html>
标签：username,onblur,用户名,javaScript,checkUserName,笔记,学习,usernameInput,document From： https://www.cnblogs.com/lianthankyou/p/18104545