javascript - 根据问题返回不同的消息

Question

我有一个 jQuery 验证 addMethod，它检查密码长度并确保该值与另一个密码字段值匹配。

我不知道如何让 addMethod 根据原因返回自定义消息，这可能吗？

两个密码字段是:

<input type="password" class="required" name="Password" id="Password">
<input type="password" class="required" name="ConfirmPassword" id="ConfirmPassword">

代码:

$.validator.addMethod("arePasswordsValid", function(value, element) {

    this.isValid = true;
    this.errorMessage = "";
    this.options = {
         minLength: 6,
         maxLength: 20
    };

    if (value != $('#ConfirmPassword').val()) {
        this.errorMessage = "Password and Confirm Password should be same";
        this.isValid = false;
    }
    if (value.length < this.options.minLength || value.length > this.options.maxLength) {
        this.errorMessage = "The password must be between 6 and 20 characters long";
        this.isValid = false;
    }
    return this.isValid;
}, this.errorMessage);

$('form').find('input#Password').rules("add", {
     required: true,
     arePasswordsValid: true
});

上述内容不起作用，因为 this.errorMessage 不可访问，表单会根据需要填写的必填字段进行验证。

有什么想法吗？

Answer 1

1) 您的 minlength 和 maxlength 规则拼写错误。请注意，大写的 L 不正确。

2) minlength 和 maxlength 规则可以简单地组合成 the rangelength rule .

rangelength: [6,20]

3)你让事情变得比实际需要的更加复杂。只需使用 the equalTo rule 。您的情况正是它旨在解决的问题。

4) 使用messages选项更改任何消息的确切措辞。

工作演示:http://jsfiddle.net/7pN8A/2/

$('#myform').validate({
    rules: {
        Password: {
            required: true,
            rangelength: [6,20]
        },
        ConfirmPassword: {
            equalTo: "#Password"  // this is all you need... the rules for the other will apply
        }
    },
    messages: {  // optional, over-ride default messages
        Password: {
            rangelength: "The password must be between {0} and {1} characters long"
        },
        ConfirmPassword: {
            equalTo: "Password and Confirm Password should be same"
        }
    }
});

您的 HTML:

<form id="myform">     
    <input type="password" class="required" name="Password" id="Password">
    <input type="password" class="required" name="ConfirmPassword" id="ConfirmPassword">
</form>