美文网首页
前端:输入密码,并实时进行密码合法性和一致性检验

前端:输入密码,并实时进行密码合法性和一致性检验

作者: 破碎的時光 | 来源:发表于2019-08-19 08:56 被阅读0次
    简要记录创建用户时对密码的检验

    -显示(实时提示密码信息)

    <body>
        <div class="modal-body password-group">
            <label class="col-sm-2 control-label">密码:</label> <input
                style="display: inline-block; width: 400px; height: 25px"
                type="password" class="form-control" id="psw"
                onblur="checkPassword()" placeholder="请输入密码" name="password">
        </div>
        <font size="2" face="arial" color="grey">
            &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; 
            <span id="pswErrorMsg">6~32个字符,至少包含大、小写字母、数字和特殊字符中的两种 <br />
                &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
                特殊字符有效范围:.-_:,!@#%&*()
        </span>
        </font>
        <div class="modal-body">
            <label class="col-sm-2 control-label">确认密码:</label> 
            <input
                style="display: inline-block; width: 400px; height: 25px"
                type="password" class="form-control" id="pswConfirm"
                onblur="checkPasswordAgain()" placeholder="请再次输入密码"
                name="passwordConfirm">
        </div>
        <font size="2" face="arial">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
            <span id="pswConfirmMsg"></span>
        </font>
    </body>
    

    -检验第一次输入的密码的合法性

    function checkPassword() {
    
            var name = $("#psw").val();
            var RegExp1 = /(?!^(\d+|[a-z]+|[A-Z]+|[-_.:,!@#%&*?]+)$)^[\w-.:,!@#%&*?]*/;
            var RegExp2 = /[A-Za-z0-9.\-_:,!@#%&*()]*/;
            var RegExp3 = /[A-Za-z0-9.\-_:,!@#%&*()]{6,32}/;
            if (name == "") {
                errmsg("pswErrorMsg","密码不能为空!");
                return false;
            }
            if (RegExp2.exec(name) != name) {
                errmsg("pswErrorMsg","仅支持数字、大写字母、小写字母和指定特殊字符!");
                return false;
            }
            if (!RegExp1.test(name)) {
                errmsg("pswErrorMsg","数字、大写字母、小写字母和指定特殊字符至少包含2种!");
                return false;
            }
            if (RegExp3.exec(name) != name) {
                errmsg("pswErrorMsg","长度应为6~32个字符!");
                return false;
            }else{
                okmsg("pswErrorMsg","密码可用");
                return false;
            }
            
            $.ajax({
                type : "POST",
                url : "api/checkPassword",
                data : "name=" + name,
                success : function(msg) {
                    if (msg.code == 1) {
                        $("#pswErrorMsg").removeClass();
                        $("#pswErrorMsg").addClass("#pswErrorMsg");
                        $("#pswErrorMsg").html(msg.message);
                    } else {
                        $("#pswErrorMsg").removeClass();
                        $("#pswErrorMsg").addClass("#pswErrorMsg");
                        $("#pswErrorMsg").html(msg.message);
                    }
                }
            });
        }
    

    -检验二次输入的一致性

    function checkPasswordAgain() {
    
            var name = $("#pswConfirm").val();
            var password = $("#psw").val();
            if (name != password) {
                errmsg("pswConfirmMsg","两次输入密码不一致!");
                return false;
            }else if(name != ""){
                okmsg("pswConfirmMsg","两次输入密码一致");
            }
    
            $.ajax({
                type : "POST",
                url : "api/checkPasswordAgain",
                data : "name=" + name,
                success : function(msg) {
                    if (msg.code == 1) {
                        $("#pswConfirmMsg").removeClass();
                        $("#pswConfirmMsg").addClass("#pswConfirmMsg");
                        $("#pswConfirmMsg").html(msg.message);
                    } else {
                        $("#pswConfirmMsg").removeClass();
                        $("#pswConfirmMsg").addClass("#pswConfirmMsg");
                        $("#pswConfirmMsg").html(msg.message);
                    }
                }
            });
        }
    
    展示
    前端展示.png 显示错误信息.png 密码合法.png 二次检验.png
    合法.png

    相关文章

      网友评论

          本文标题:前端:输入密码,并实时进行密码合法性和一致性检验

          本文链接:https://www.haomeiwen.com/subject/uhlfsctx.html