jquery - 扩展 jQuery 验证密码功能

Question

我正在使用这个插件:jQuery Validate

我有一个像这样的基本表单:

HTML

<form class="cmxform" id="signupForm" method="get" action="">
    <fieldset>
        <legend>Validating a complete form</legend>

            <label for="firstname">Firstname</label>
            <input id="firstname" name="firstname" type="text" />

            <label for="lastname">Lastname</label>
            <input id="lastname" name="lastname" type="text" />

            <label for="username">Username</label>
            <input id="username" name="username" type="text" />

            <label for="password">Password</label>
            <input id="password" name="password" type="password" />

            <label for="confirm_password">Confirm password</label>
            <input id="confirm_password" name="confirm_password" type="password" />

            <input class="submit" type="submit" value="Submit"/>

    </fieldset>
</form>

jQuery

$().ready(function() {

    // validate signup form on keyup and submit
    $("#signupForm").validate({
        rules: {
            firstname: "required",
            lastname: "required",
            username: {
                required: true,
                minlength: 2
            },
            password: {
                required: true,
                minlength: 5
            },
            confirm_password: {
                required: true,
                minlength: 5,
                equalTo: "#password"
            },
            email: {
                required: true,
                email: true
            }
        },
        messages: {
            firstname: "Please enter your firstname",
            lastname: "Please enter your lastname",
            username: {
                required: "Please enter a username",
                minlength: "Your username must consist of at least 2 characters"
            },
            password: {
                required: "Please provide a password",
                minlength: "Your password must be at least 5 characters long"
            },
            confirm_password: {
                required: "Please provide a password",
                minlength: "Your password must be at least 5 characters long",
                equalTo: "Please enter the same password as above"
            },
            email: "Please enter a valid email address"
        }
    });

});

我想让密码需要大写字母并至少包含一个数字。

我如何更改密码规则并将其添加到其中？

这是一个 fiddle :

http://jsfiddle.net/dwhitmarsh/xXUWB/

Answer 1

在验证发生之前，您必须首先添加自己的验证方法。就我个人而言，我推荐文档的 ready 事件。 您可以使用以下“脚手架”:

$(function() {
    $.validator.addMethod('capitalLetterMandatory', function(function(value, element) {
        // Return true if the validation succeeded, false otherwise.
        // Best achieved through an appropriate regular expression
    });
});

然后，在初始化验证器时，不要忘记在规则定义 block 中实际将该规则 Hook 到您的字段:

rules: {
    password: { // Note that in this line it's the field name, not the rule name, which can be confusing
         capitalLetterMandatory: true,  // rule name
         mandatory: true
    },
    // Other rules go here
}