jquery - 为 jQuery 验证插件动态设置规则/消息对象

Question

我确信有更好的方法来实现这一点，但无法弄清楚。我有一个表单，顶部有两个始终需要的字段。然后，我有一系列选项卡，这些选项卡在选择时会加载到不同的字段中(加载单独的 HTML block ，以便在提交表单时仅提交 DOM 中当前的内容)。我正在使用 jquery 验证插件( http://docs.jquery.com/Plugins/Validation )，它允许您在加载每组新字段时将验证规则/消息设置为对象，以删除冗余规则并在字段更改时添加新规则。问题是规则/消息对象都必须写入js中以供需要时使用，并且文件很长，看起来效率很低。这是我的伪代码:

<form>
    <input1 (always on page) />
    <input2 (always on page) />
    <ul id="nav-tabs">
        <li id="tab1"></li>
        <li id="tab2"></li>
        <li id="tab3"></li>
    </ul>
    <div id="dynamic-content">
        <!-- different form fields load in here from separate html files, all requiring different rules in addition to the 2 fields always on the page -->
    </div>
    <input type="submit" />
</form>

我认为可能有一些解决方案可以在设置时加载每个 HTML block 的规则？有人做过这样的事吗？

感谢任何可以提供帮助的人。

Answer 1

使用内置的rules()方法添加规则。 See documentation.

注意:您必须在调用.validate()之后调用此方法。

jsFiddle DEMO

$("#form").validate({
    // my other options
});

// the following method must come AFTER .validate()

$(".myClass").each(function() {
    $(this).rules('add', {
        required: true,
        minlength: 5
    });
});

以下内容与自定义消息相结合:。请注意，格式与在 .validate()... 中添加规则作为选项时略有不同。

$(".myClass").each(function() {
    $(this).rules('add', {
        required: true,
        minlength: 5,
        messages: {
            required: "Required input",
            minlength: jQuery.format("At least {0} characters are necessary")
        }
    });
});

当您向表单动态添加字段时，此方法也非常有用。

var myRule = {
    required: true,
    minlength: 5,
    messages: {
        required: "Required input",
        minlength: jQuery.format("At least {0} characters are necessary")
    }
}

$("#myform").append('<input type="text" name="four" /><br />');
$("[name='four']").rules('add', myRule);

jsFiddle 演示:

http://jsfiddle.net/kSFKE/10/

如果您要动态销毁不需要的字段输入，则无需使用remove 来删除规则。