jQuery.validator.addMethod自定义方法密码验证补充

用jQuery的插件密码校验：

html和js代码：

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改用户密码')" />
    <th:block th:include="include :: select2-css" />
    <meta charset="UTF-8">
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-user-resetPwd">
            <input name="userId"  type="hidden"  th:value="${user.userId}" />
            <div class="form-group">
                <label class="col-sm-3 control-label">登录名称：</label>
                <div class="col-sm-8">
                    <input class="form-control" type="text" readonly="true" name="loginName" th:value="${user.loginName}"/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">旧密码：</label>
                <div class="col-sm-8">
                    <input class="form-control" type="password" name="oldPassword" id="oldPassword">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">新密码：</label>
                <div class="col-sm-8">
                    <input class="form-control" type="password"   name="newPassword" id="newPassword" placeholder="请输入请密码"     required>

                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">再次确认：</label>
                <div class="col-sm-8">
                    <input class="form-control" type="password" name="confirm" id="confirm" placeholder="请再次输入您的密码"   >
                    <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 请再次输入您的密码</span>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: select2-js" />

    <script>

        $("#form-user-resetPwd").validate({
            rules:{
                oldPassword:{
                    required:true,
                    remote: {
                        url: ctx + "system/user/profile/checkPassword",
                        type: "get",
                        dataType: "json",
                        data: {
                            password: function() {
                                return $("input[name='oldPassword']").val();
                            }
                        }
                    }
                },
                newPassword: {
                    required: true,
                    minlength: 8,
                    maxlength: 20,
                    checkpassword: true
                },
                confirm: {
                    required: true,
                    equalTo: "#newPassword",
                    checkpassword: true

                }
            },
            messages: {
                oldPassword: {
                    required: "请输入原密码",
                    remote: "原密码错误"

                },
                newPassword: {
                    required: "请输入新密码",
                    minlength: "密码不能小于8位",
                    maxlength: "密码不能大于20位"
                },
                confirm: {
                    required: "请再次输入新密码",
                    equalTo: "两次密码输入不一致"
                }

            },
            focusCleanup: true
        });
       /**addMethod(name,method,message)方法，参数 name 是添加的方法的名字。参数 method 是一个函数，接收三个参数 (value,element,param) 。value
       是元素的值，element 是元素本身，param 是参数。

*/     
        jQuery.validator.addMethod("checkpassword", function(value, element) {
            var Password = /^(?=.*[A-Za-z])(?=.*[!@#$&*])(?=.*[0-9]).{8,20}$/;
            return this.optional(element) || (Password.test(value));
        }, "请输入8-20位字符，至少包含数字/大写字母/小写字母/特殊符号中的三项");

        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(ctx + "system/user/profile/resetPwd", $('#form-user-resetPwd').serialize());
            }
        }
    </script>
</body>

</html>

jQuery.validator.addMethod自定义方法密码验证补充

猜你喜欢