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

拼搏现实的明天。 2022-05-25 13:08 202阅读 0赞

老规矩，先上效果图：

![20180515114611443][]

![20180515114622957][]

实现原理：

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);
    }

[20180515114611443]: /images/20220525/61edf569aa634e619b7c5a6d3283aee9.png
[20180515114622957]: /images/20220525/147332c4dbc64875a205470a1b76130f.png