声明 jQuery Validate 插件规则——属性 vs. 类 vs. 代码答案

【问题标题】：Declaring jQuery Validate plugin rules -- attribute vs. class vs. code声明 jQuery Validate 插件规则——属性 vs. 类 vs. 代码
【发布时间】：2012-12-06 00:25:31
【问题描述】：

在 jQuery Validate 插件的示例中，我看到了声明验证规则的三种不同方法：

CSS 类——例如<input type="text" name="whatever" class="required" />
属性——例如<input type="text" name="whatever" required />
JS 代码 -- 例如$("#myForm").validate({ rules: { whatever: "required", ... } });

但我在文档中没有看到任何地方解释了为什么你会使用其中一个。我也没有看到关于如何在每种方法中使用 validation methods 的说明（例如，如何将“max(value)”方法与标签属性或 css 类一起使用？）。

这三种方法之间的权衡是什么？以及如何使用每种方法声明所有不同的验证方法？

【问题讨论】：

最容易理解和维护的。答案完全取决于您的具体情况。有多少字段，有多少独特的规则集，动态创建的字段等等。我通常喜欢在我的 JS 中指定规则。然后，当我创建一个巨大的表单时，我改为在 HTML 中使用 classes 指定它们。我的建议是遵循代码in the examples，并在遇到困难时发布更具体的问题。
可能的欺骗：stackoverflow.com/questions/14375707/…

标签： jquery jquery-validate

【解决方案1】：

您可以通过数据规则属性应用规则。这是维护干净代码的最简单方法，也可能是最好的方法...

例子：

<form id="myform">
    <input type="text" name="email" data-rule-required="true" data-rule-email="true">    
    <input type="text" name="password" id="password" data-rule-required="true" data-rule-minlength="6">
    <input type="text" name="password-confirm" data-rule-required="true" data-rule-minlength="6" data-rule-equalto="#password">
</form>

您甚至可以通过数据属性提供消息：

<input id="cemail" name="email" data-rule-required="true" data-rule-email="true" data-msg-email="Please enter a valid email address" />

在 JavaScript 中只需调用：

$('#myform').validate();

【讨论】：

值得注意的是，'data-rule-'标记功能仅在jquery.validate v1.10及以上版本中可用。
请注意，equals to rule 属性是 data-rule-equalto="#password"（不带 's'）。
如果要动态执行，只需添加以下行：$('#password-confirm').attr('data-rule-equalto', '#password');

【解决方案2】：

来自文档http://jqueryvalidation.org/rules：

有几种方法可以指定验证规则。

可以将不带参数的验证方法指定为元素上的类（推荐）

可以将带参数的验证方法指定为属性（推荐）

可以使用元数据插件将两者都指定为元数据 [[[请注意，这已被弃用，因此文档似乎有点过时]]]

两者都可以使用 validate() 方法的规则选项指定

https://stackoverflow.com/a/14380401/749227 有一些额外的有用信息。

不过，我更喜欢在类上使用“必需”属性。我没有发现这种原生属性支持它在文档中直接引用，但因为看起来屏幕阅读器会发现它比 class="required" 更有用，所以在这种情况下我会选择它。

顺便说一句，我很想看看插件还尊重哪些其他原生属性。以及 ADT 获取了哪些信息。

【讨论】：

【解决方案3】：

回答您的具体问题：

“你将如何使用带有标签属性的“max(value)”方法”

<input id="mytext" name="mytext" max="2"/>

“你将如何将“max(value)”方法与 ... CSS 类一起使用”

您不能这样做，请使用其他方法之一来设置规则。

【讨论】：

【解决方案4】：

你可以使用 data-rule-required 属性，请不要使用 jquery.metadata.js ，我在 jQuery Validation Plugin 1.11.1 中测试过

【讨论】：

我相信开发人员最近删除了对元数据插件的支持 - 不过我必须检查一下。