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

【问题标题】：Should I implement my validation using the built-in class or the rule?我应该使用内置类还是规则来实现我的验证？
【发布时间】：2018-12-18 09:35:12
【问题描述】：

我正在使用 jQuery 验证插件来验证我的表单。正如我所看到的（我很难从文档中弄清楚），对于如何应用内置验证规则，我有 2 个基本选择：

在 HTML 中应用类

<input name="myNum" id="myNum" type="text" class="number" />

调用验证方法时通过输入id指定规则

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

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

【问题讨论】：

我认为这是更个人的选择。我个人使用第一种方法，因为验证与该输入相关。
有这么多不同的方式来使用这个插件，我不认为有任何一种“最佳实践”。这将取决于有多少字段、如何定义规则等。我创建了一个非常长且复杂的表单，在我的案例中使用所有方法的组合更有意义。

标签： jquery jquery-validate

【解决方案1】：

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

最小长度，
最大长度
范围长度
分钟
最大
范围
等于

都带一个参数 - 即它们的定义是

function(value, element, param)

而不是

function(value, element)

所以这个标记不起作用

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

不带额外参数的方法有'required'、'email'、'url'、'date'等

因此，即使对于您自己的自定义方法，您也可以通过类名将它们应用于表单字段，只要它们具有签名 function(value, element)

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

<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]"/>

注意。对于数据样式，您需要插件的最新版本

【讨论】：

不应该是逗号 - class="required numbers"
我认为应该有一种方法可以内联定义所有规则（尽管它没有记录）。已在 in this question 讨论过，但似乎不起作用。
你曾经能够做到这一点 class="{required:true,minlength:2}"，但这已被删除并被数据规则样式 - github.com/jzaefferer/jquery-validation/commit/…

【解决方案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
    });
});

【讨论】：