jQuery 验证特殊方法不会出现自定义消息

Question

我正在使用 jQuery Validator 插件，它运行得很好。我刚刚添加了另一种自定义方法来验证密码是否包含一个数字或一个特殊字符，这也很有效。问题是，当该条件失败时(他们只输入 6 个字符的文本)，它永远不会抛出错误消息“您的密码必须至少包含一个数字或特殊字符”。有谁知道为什么会这样吗？代码如下:

jQuery.validator.addMethod("onespecial", function(value, element){
        var pattern = /^(?=.{6,})(?=.*[a-z])(?=.*[0-9])|(?=.*[!@#$%^&*()-+=]).*$/;

        return (pattern.test(value));

    }, "Your password must contain one number or special character");

    $("#activateForm").validate({
        rules: {
            first_name: "required",
            last_name: "required",
            password: {
                required: true,
                minlength: 6,
                onespecial: true
            },
            pass_confirm: {
                required: true,
                minlength: 6,
                equalTo: "#Password",
                onespecial: true
            },
            position: "required",
            category: "required"

        },
        messages: {
            first_name: "Please enter your first name",
            last_name: "Please enter your last name",
            password: "Please enter a valid password",
            pass_confirm: "Your passwords much match",
            position: "Please select your position",
            category: "Please select your category"
        }
    }); 

更新:使用标记

 <div id="activate-form">
<h1>Welcome. We just need a little bit more information.</h1>
  <form action="/" id="activateForm" method="post" novalidate="novalidate">     <div><input type="text" name="first_name" class="form-input" placeholder="First name" onfocus="this.placeholder=''" onblur="this.placeholder='First name'" id="FirstName"></div>        <div><input type="text" name="last_name" class="form-input" placeholder="Last name" onfocus="this.placeholder=''" onblur="this.placeholder='Last name'" id="LastName"></div>        <div><select name="category" class="form-input" id="Category"><option value="">Select category</option><option value="test">test</option><option value="test">test</option></select></div>
    <div><select name="position" class="form-input" id="Position"><option value="">Select Position</option><option value="RA">RA</option></select></div>
    <div><input type="password" name="password" class="form-input" placeholder="Password" onfocus="this.placeholder=''" onblur="this.placeholder='Password'" id="Password"></div>       <div><input type="password" name="pass_confirm" class="form-input" placeholder="Confirm password" onfocus="this.placeholder=''" onblur="this.placeholder='Confirm password'" id="PassConfirm"></div>        <div><input type="hidden" name="key" value="fff" id="Key"></div>          <input type="submit" value="Finish" class="button">     </form></div>

Answer 1

您没有从自定义方法中收到消息，因为您正在使用以下命令覆盖 password 和 pass_confirm 的所有错误消息messages 选项...

messages: {
    first_name: "Please enter your first name",
    last_name: "Please enter your last name",
    password: "Please enter a valid password",  // <-- overrides all messages
    pass_confirm: "Your passwords much match",  // <-- overrides all messages
    position: "Please select your position",
    category: "Please select your category"
}

您可以为每条规则指定一条消息，然后当您没有为自定义方法指定消息时，将使用您在 addMethod 中定义的消息。

messages: {
    first_name: "Please enter your first name",
    last_name: "Please enter your last name",
    password: {
        required: "Please enter a valid password",
        minlength: "Please enter a valid password"
        // onespecial: "" // <-- message already defined within addMethod()
    },
    pass_confirm: "Your passwords much match", 
    position: "Please select your position",
    category: "Please select your category"
}

另请注意:无需重复 pass_confirm 字段的所有规则。因为，无论如何，它必须始终与密码字段匹配，因此这些条件已经满足。

password: {
    required: true,
    minlength: 6,
    onespecial: true
},
pass_confirm: {
    equalTo: "#Password",  
},

演示:http://jsfiddle.net/WZPcW/