JS实现对登陆界面表单输入内容的验证,借助正则表达式实现
实现效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/96276e91135d49259439902735e0cd4a.png#pic_center)
HTML
<!-- 验证登陆信息S -->
<div class="login_container">
<h1>验证表单中信息是否正确</h1>
<label for="">QQ</label><input type="text" name="" id="inp1" /><span></span><br>
<label for="">手机</label><input type="text" name="" id="inp2" /><span></span><br>
<label for="">邮箱</label><input type="text" name="" id="inp3" /><span></span><br>
<label for="">座机</label><input type="text" name="" id="inp4" /><span></span><br>
<label for="">姓名</label><input type="text" name="" id="inp5" /><span></span><br>
</div>
<!-- 验证登陆信息E -->
JS
// 验证登陆信息S
var inpQQ = document.getElementById("inp1");
var inpMobile = document.getElementById("inp2");
var inpEmail = document.getElementById("inp3");
var inpTel = document.getElementById("inp4");
var inpName = document.getElementById("inp5");
// 规律
var regName = /^[\u4e00-\u9fa5]{2,6}$/;
var regMobile = /^\d{11}$/;
var regTel = /^0\d{2,3}-\d{7,8}$/;
var regQQ = /^[1-9]\d{4,10}$/;
var regEmail = /^\w+@\w+\.\w+$/;
// 绑定事件
check(inpName, regName);
check(inpTel, regTel);
check(inpQQ, regQQ);
check(inpMobile, regMobile);
check(inpEmail, regEmail);
function check(inp, regEx) {
inp.onblur = function () {
var regName = /^[\u4e00-\u9fa5]{2,6}$/;
if (regEx.test(this.value)) {
this.nextSibling.innerHTML = "正确";
this.nextSibling.className = "right";
} else {
this.nextSibling.innerHTML = "错误";
this.nextSibling.className = "wrong";
}
};
}
// 验证登陆信息E