0

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

  1. 在 HTML 中应用类

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

  2. 调用 validate 方法时通过输入 id 指定规则

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

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

4

2 回答 2

4

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

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

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

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

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

于 2013-01-17T13:42:24.023 回答
0

您可以使用内置rules()方法添加规则。 请参阅文档。

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

注意：必须在调用后调用该方法.validate()，并且必须与.each().

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

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

jsFiddle 演示

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 演示

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
    });
});
于 2013-01-17T16:45:24.990 回答