Jquery 验证器确认密码问题

Question

我正在尝试使用 jquery 验证器进行验证。第一次一切正常。

但是从第二次开始，在不更改密码字段中的任何内容的情况下，如果我转到确认密码部分，理想情况下密码会显示错误，但同时确认密码也显示错误，"confirm password not matches to password."

确认密码只有输入与密码不匹配的错误密码才会显示错误。

是否有解决此问题的方法，或者我是否需要编写自己的自定义方法来扩展验证器方法。

这是我尝试过的：

$(document).ready(function(){
$("#cp").validate(validateChangePswrdForm("changePasswordForm"));
});
var validateChangePswrdForm = function() {
    var that = this;
    return {
        rules: {
            password: {
                required: true,
                minlength: 8,
            },
            confirmpassword: {
                equalTo: "#password"
            }
        },
        messages: {
            password: {
                required: "password is required",
                minlength: 5
            },
            confirmpassword: {
                required: "confirm password is required",
                minlength: 5
            }
        },
        submitHandler: function(fId, evt) {
            var serForm = $(fId).serialize();
            changepassword(fId, evt)
        }
    }
};

var changepassword = function(){
 alert('Validated');
};

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div id="cp">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-md-8 col-sm-7">
                <form method="post" role="form" autocomplete="off" name="changePasswordForm" id="changePasswordForm">
                    <div class="alert alert-danger changepassword-error hidden">
                    </div>
                    <div class="form-group">
                        <label for="password">password</label>
                        <input type="password" class="form-control" name="password" id="password" placeholder="password">
                    </div>
                    <div class="form-group reg-form col-sm-7 padLeft">
                        <label for="confirmpassword">Confirm Password</label>
                        <input type="password" class="form-control noradius" name="confirmpassword" id="confirmpassword" placeholder="Confirm Password">
                    </div>
                    <div class="btn-toolbar">
                        <button type="submit" class="btn">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

Answer 1

您的代码：

$("#cp").validate(....

For the first time every thing works fine

它根本不可能起作用。如果将 .validate() 方法附加到 <div> (id="cp")，则什么也不会发生。要初始化插件，您只能将此方法附加到 <form> 元素。

此外，您不能将两个参数传递给 submitHandler 函数。它仅指定处理一个表示 form 对象的参数。

并且 messages 对象中的值只能包含表示自定义错误消息的字符串。您有为从未声明的规则定义的消息以及非字符串的值。

这是有效的：

$(document).ready(function() {

    $("#changePasswordForm").validate({
        rules: {
            password: {
                required: true,
                minlength: 8,
            },
            confirmpassword: {
                equalTo: "#password"
            }
        },
        messages: {
            password: {
                required: "password is required",
                // minlength: 5 // <- this must be a string!
            },
            confirmpassword: {
                required: "confirm password is required",
                // minlength: 5 // <- this must be a string!
            }
        },
        submitHandler: function(fId) {
            var serForm = $(fId).serialize();
            changepassword()
        }
    });

});

var changepassword = function() {
    alert('Validated');
};

演示：http://jsfiddle.net/eqouszsw/

Jquery 验证器确认密码问题

Jquery Validator Confirm Password issue

jquery

jquery-validate