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

老规矩,先上效果图:

实现原理:

  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 onblur="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 oninput="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);
}


阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

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

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭