Question

我正在使用jQuery validate插件来验证我的表单。正如我所看到的那样（我很难从文档中解决问题），我有两个基本选择如何应用内置验证规则：

在HTML
中应用该课程
<input name="myNum" id="myNum" type="text" class="number" />

调用验证方法时按输入ID指定规则

$('#sales').validate({
    rules: {
        myNum: {number: true}
    }
});

哪个被认为是“最佳实践”？我试图决定在validate方法中将所有规则编码在一个地方是否更清楚，以便我可以在一个集中位置看到我的所有验证，或者如果将HTML中的简单规则编码为有意义类，只在validate方法中放置自定义验证。什么是更可接受的验证编码方式？我何时使用哪种方法应该确定什么？

Answer 1

除了个人选择之外，您需要考虑的唯一因素是，如果您希望作为规则应用的方法是采用其他参数的方法，那么您不能将方法名称用作类名。例如这些方法

minlength，
的maxlength
rangelength
分钟
最大
范围
equalTo

都采用参数 - 即他们的定义是

function(value, element, param)

而不是

function(value, element)

所以这个标记不起作用

<!-- doesn't work --> 
<input name="email2" class="minlength"/>

不需要额外参数的方法是'required'，'email'，'url'，'date'等。

因此，即使对于您自己的自定义方法，您也可以按类名将它们应用于表单字段，只要它们具有签名函数（值，元素）

文档并不完全是最新的 - 有多种方法可以将方法应用于标记中的输入字段，包括文档中根本没有提到的数据 - 属性。例如，这些都是有效的：

<input name="email1" required />
<input name="email2" class="required"/>
<input name="email3" type="required"/>
<input name="email4" data-rule-required="true" />
<input name="email5" data-rule-required="true" data-rule-minlength="5" />
<input name="email6" data-rule-required="true" data-rule-range="[1,5]"/>

NB。对于数据样式，您需要一个最新版本的插件

Answer 2

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

这就像两种方法中最好的一样。您可以避免使用.validate()定义所有规则，同时仍然具有定义自定义规则集的无限灵活性。然后，这些规则的“集合”可以由自定义class，name，id等分配。

注意：必须在致电.validate()后调用此方法，并且必须与.each()合并。

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

（请注意，格式与定义的自定义消息略有不同，而不是在.validate()中添加规则时

jsFiddle DEMO

HTML：

<input type="text" class="myclass" name="field1" /> <input type="text" class="myclass" name="field2" /> <input type="text" class="myclass" name="field3" />

jQuery的：

$('form').validate({ // your other options }); // the following method must come AFTER .validate() $('form').find('.myclass').each(function() { $(this).rules('add', { required: true, digits: true, range: [1,5], messages: { required: "Required input", digits: "Only digits please", range: "Please only enter between {0} and {1}" } }); });

或者，您可以按字段name而不是class ...
进行定位
jsFiddle DEMO

HTML：

<input type="text" class="myclass" name="field1" /> <input type="text" class="myclass" name="field2" /> <input type="text" class="myclass" name="field3" />

jQuery的：

$('#form').validate({ // your other options }); // the following method must come AFTER .validate() $("input[name^='field']").each(function() { $(this).rules('add', { required: true, digits: true }); });

我应该使用内置类还是规则来实现验证？

2 个答案: