jQuery Validate 相关参数及常用的自定义验证规则

jQuery Validate是一款基于jQuery的表单验证插件，它可以轻松地验证用户提交的表单数据，并提供了许多默认的验证规则。此外，还可以自定义验证规则来满足特定的需求。

本文将详细讲解jQuery Validate相关参数及常用的自定义验证规则，并提供两个示例来说明具体用法。

常用参数

• rules：指定当前元素的验证规则，可以是一个对象或一个字符串。默认值为null。
• messages：定义每个验证规则对应的提示信息，可以是一个对象或一个字符串。默认为null。
• submitHandler：验证通过后的回调函数，一般用于提交表单。默认值为null。
• errorPlacement：错误提示信息的摆放位置，可以是一个方法或一个字符串。默认值为错误信息放在当前元素的下方。
• errorClass：错误提示信息的样式类名。默认值为error。

常用的验证规则

• required：必填项。
• email：邮箱格式。
• url：URL地址格式。
• digits：正整数。
• number：数字，包括小数。
• minlength：最小长度。
• maxlength：最大长度。
• equalTo：和指定元素的值相等。

自定义验证规则

除了默认的验证规则外，还可以通过扩展方法来定义自己的验证规则。以下是一个自定义验证规则的示例：

$.validator.addMethod( "zipcode", function( value, element ) {
    return this.optional( element ) || /^[0-9]{6}$/.test( value );
}, "请输入正确的邮政编码" );

代码中，通过$.validator.addMethod()方法添加了一个名为zipcode的验证规则，该规则验证的是输入值是否为6位数字的邮政编码。当验证不通过时，提示信息为“请输入正确的邮政编码”。

如此扩展自定义验证规则，就可以满足各种需要了。

示例说明

下面提供两个示例用于说明：

示例一：自定义验证规则，验证密码强度

<form id="register-form">
    <div>
        <label for="password">密码：</label>
        <input type="password" name="password" id="password">
    </div>
    <div>
        <label for="confirm-password">确认密码：</label>
        <input type="password" name="confirm-password" id="confirm-password">
    </div>
    <button type="submit">注册</button>
</form>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
<script>
$(function() {
    $.validator.addMethod("pwstrength", function(value, element) {
        return /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[\s\S]{8,}$/.test(value);
    }, "密码强度不够");

    $('#register-form').validate({
        rules: {
            password: {
                required: true,
                pwstrength: true
            },
            "confirm-password": {
                required: true,
                equalTo: "#password"
            }
        },
        messages: {
            "confirm-password": {
                equalTo: "两次输入的密码不一致"
            }
        },
        submitHandler: function() {
            alert('注册成功！');
        }
    });
});
</script>

上述代码中，自定义了一个名为pwstrength的验证规则，用于验证密码强度是否够。当密码强度不够时，提示信息为“密码强度不够”。通过rules对象定义了password元素的验证规则为必填项，并且需要符合pwstrength自定义验证规则。confirm-password元素同理，并且还需要和password元素的值相等。当验证通过时，弹出“注册成功”信息。

示例二：自定义错误提示信息摆放位置

<form id="login-form">
    <div>
        <label for="username">用户名：</label>
        <input type="text" name="username" id="username">
    </div>
    <div>
        <label for="password">密码：</label>
        <input type="password" name="password" id="password">
    </div>
    <button type="submit">登录</button>
</form>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
<script>
$(function() {
    $('#login-form').validate({
        rules: {
            username: "required",
            password: "required"
        },
        messages: {
            username: "请输入用户名",
            password: "请输入密码"
        },
        errorPlacement: function(error, element) {
            error.appendTo(element.parent().next());
        },
        submitHandler: function() {
            alert('登录成功！');
        }
    });
});
</script>

上述代码中，通过errorPlacement参数定义了错误提示信息的摆放位置为当前元素的下一个兄弟元素中。当验证不通过时，错误提示信息将出现在当前元素和下一个兄弟元素之间，而不是默认的在下方。当验证通过时，弹出“登录成功”信息。

以上两个示例都是通过jQuery Validate实现了表单验证，功能强大且易用。