老规矩,先上效果图:
实现原理:
- 密码框绑定onblur事件,当失焦时通过正则表达式对输入的密码进行校验;
- 重复密码框绑定oninput事件,在进行输入时通过Js代码和密码进行对比;
具体实现:
html
<h3>登录 信息</h3>
<div>
<span>密码(6-20位以字母开头只能包含字母、数字、下划线)<label style="color:red;">*</label> <font id="passwordMSG"></font></span>
<input type="password" name="password" id="password" maxlength="20" required οnblur="checkPwd(this.value)">
</div>
<div>
<span>重复密码<label style="color:red;">*</label> <font id="mm2MSG"></font></span>
<input form="other" type="password" id="mm2" maxlength="20" required οninput="checkPwd2(this.value)">
</div>
对应Js代码(其中的Flag4、Flag5是定义的全局变量,用于最后表单提交时的校验工作):
/*验证密码*/
function checkPwd(password) {
/*获取提示框*/
var passwordMSG = document.getElementById("passwordMSG");
/*定义正则表达式*/
var reg = /^[a-zA-Z]\w{5,19}$/;
var flag = reg.test(password);
if ( !flag ) {
passwordMSG.innerHTML = "<font color='red'>密码格式有误!</font>";
Flag4 = false;
} else {
passwordMSG.innerHTML = "<font color='green'><b>√</b></font>";
Flag4 = true;
}
}
/*验证重复密码*/
var timeoutID;
function checkPwd2(pwd2) {
/*获取提示框*/
var mm2MSG = document.getElementById("mm2MSG");
/*获取第一个框输入的密码*/
var pwd1 = document.getElementById("password").value;
//对上次未完成的延时操作进行取消
clearTimeout(timeoutID);
//对于密码比对延迟500ms,避免频繁比对
timeoutID = setTimeout(function(){
/*进行比对*/
if(pwd1 != pwd2){
Flag5 = false;
mm2MSG.innerHTML = "<font color='red'>两次输入的密码不一致!</font>";
} else {
Flag5 = true;
mm2MSG.innerHTML = "<font color='green'><b>√</b></font>";
}
},500);
}