用户注册时重复密码校验的实现

老规矩，先上效果图：

实现原理：

1. 密码框绑定onblur事件，当失焦时通过正则表达式对输入的密码进行校验；
2. 重复密码框绑定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);
}