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

作者: 破碎的時光 | 来源:发表于2019-08-19 08:56 被阅读0次

前端：输入密码，并实时进行密码合法性和一致性检验
antDesign注册时，验证两次密码是否相同
jfinal Validator组件的使用
Ubuntu root账号
重置密码页面设计2
2019-01-22 使用JS在前端对表单进行验证
密码强度校验-前端js
Kotlin实现ATM取款功能
DigestUtils
前端数据处理--密码复杂度验证方法

简要记录创建用户时对密码的检验

-显示（实时提示密码信息）

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