jQuery Validate 验证,校验规则写在控件中的具体实例

在jQuery Validate插件中，将校验规则直接写在控件中是一种灵活且方便管理的方式。这通常涉及到HTML5的`data-*`属性或者自定义的`data-*`属性来存储验证规则。不过，jQuery Validate插件本身并不直接支持通过HTML5的`data-*`属性（如`data-required`、`data-minlength`等）进行验证，但你可以通过编写一些自定义方法来利用这些属性或自定义的`data-*`属性。

不过，为了演示如何将校验规则写在控件中，我们可以采用自定义数据属性（`data-*`）的方式，并通过jQuery Validate的`rules`选项和自定义方法来实现校验。

### 示例

假设我们有以下HTML表单控件：

<form id="myForm">
    <input type="text" name="username" data-rule-required="true" data-rule-minlength="5" placeholder="Username">
    <input type="submit" value="Submit">
</form>

这里，我们使用了自定义的`data-rule-required`和`data-rule-minlength`属性来指定校验规则。

然后，我们可以通过jQuery Validate插件和自定义方法来解析这些属性：

$(document).ready(function() {
    $("#myForm").validate({
        rules: {
            username: {
                // 使用自定义方法来解析data-*属性
                required: function(element) {
                    return $(element).data('rule-required') === 'true';
                },
                minlength: function(element) {
                    var minLength = $(element).data('rule-minlength');
                    return this.optional(element) || $(element).val().length >= minLength;
                }
            }
        },
        messages: {
            username: {
                required: "Username is required",
                minlength: "Username must be at least {0} characters long"
            }
        }
    });
});

在这个例子中，我们为`username`字段定义了`required`和`minlength`两个验证规则。这两个规则都通过自定义函数来实现，这些函数读取控件上的`data-rule-*`属性来决定是否应用规则以及如何应用规则。

注意：这里的`{0}`在`minlength`的消息模板中是一个占位符，它会被替换为`minlength`规则中指定的最小值。

这样，你就可以灵活地将校验规则直接写在控件中了，同时通过jQuery Validate插件的强大功能来进行验证。