声明 jQuery Validate 插件规则——属性 vs. 类 vs. 代码
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13734988/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Declaring jQuery Validate plugin rules -- attribute vs. class vs. code
提问by Jordan Lev
In the examples for the jQuery Validate plugin, I see three different approaches to declaring validation rules:
在 jQuery Validate 插件的示例中，我看到了三种不同的声明验证规则的方法：
- CSS Classes -- e.g.
<input type="text" name="whatever" class="required" /> - Attributes -- e.g.
<input type="text" name="whatever" required /> - JS code -- e.g.
$("#myForm").validate({ rules: { whatever: "required", ... } });
- CSS 类——例如
<input type="text" name="whatever" class="required" /> - 属性——例如
<input type="text" name="whatever" required /> - JS 代码——例如
$("#myForm").validate({ rules: { whatever: "required", ... } });
But I don't see anywhere in the docs that explains why you'd use one over the other. Nor do I see an explanation of how to use the validation methodswith each approach (for example, how would you use the "max( value )" method with a tag attribute or a css class?).
但是我在文档中没有看到任何地方可以解释为什么您会使用一个而不是另一个。我也没有看到有关如何在每种方法中使用验证方法的说明（例如，您将如何使用带有标签属性或 css 类的“max(value)”方法？）。
What are the tradeoffs between these three approaches? And how exactly do you declare all the different validation methods using each approach?
这三种方法之间的权衡是什么？以及如何使用每种方法声明所有不同的验证方法？
回答by Primoz Rome
You can apply rules trough data-rule attributes. This is the easiest way and possibly the best way to maintain a clean code...
您可以通过数据规则属性应用规则。这是维护干净代码的最简单方法，也可能是最好的方法……
Example:
例子：
<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>
You can even provide messages through data attributes:
您甚至可以通过数据属性提供消息：
<input id="cemail" name="email" data-rule-required="true" data-rule-email="true" data-msg-email="Please enter a valid email address" />
In JavaScript just call:
在 JavaScript 中只需调用：
$('#myform').validate();
回答by jinglesthula
From the documentation http://jqueryvalidation.org/rules:
从文档http://jqueryvalidation.org/rules：
There are several ways to specify validation rules.
- Validation methods without parameters can be specified as classes on the element (recommended)
- Validation methods with parameters can be specified as attributes (recommended)
- Both can be specified as metadata using the metadata plugin [[[note that this is deprecated, so the docs appear to be out of date a bit]]]
- Both can be specified using the rules-option of the validate()-method
有多种方法可以指定验证规则。
- 可以将不带参数的验证方法指定为元素上的类（推荐）
- 带参数的验证方法可以指定为属性（推荐）
- 两者都可以使用元数据插件指定为元数据 [[[注意这已被弃用，因此文档似乎有点过时]]]
- 两者都可以使用 validate() 方法的规则选项指定
https://stackoverflow.com/a/14380401/749227has some additional useful information.
https://stackoverflow.com/a/14380401/749227有一些额外的有用信息。
I prefer using the 'required' attribute over a class, though. I don't find this sort of native attribute support it directly referenced in the documentation, but since it seems like screen-readers would find it more useful than class="required" I go with that in this one case.
不过，我更喜欢使用 'required' 属性而不是类。我没有发现文档中直接引用了这种本机属性支持，但由于屏幕阅读器似乎会发现它比 class="required" 更有用，因此在这种情况下我会使用它。
As an aside, I'd love to see what other native attributes are respected by the plugin. And info on which of them are picked up by ADTs.
顺便说一句，我很想看看插件尊重哪些其他本机属性。以及有关 ADT 获取哪些信息的信息。
回答by Dr Blowhard
In answer to your specific questions:
回答您的具体问题：
"How would you use the "max( value )" method with a tag attribute"
“您将如何使用带有标签属性的“max(value)”方法”
<input id="mytext" name="mytext" max="2"/>
"How would you use the "max( value )" method with a ... CSS class"
“您将如何将“max(value)”方法与...CSS 类一起使用”
You can't do this, use one of the other ways to setup the rule.
您不能这样做，请使用其他方法之一来设置规则。
回答by Gavin
you can use data-rule-required attribute , please don`t use jquery.metadata.js , i have test in jQuery Validation Plugin 1.11.1
您可以使用 data-rule-required 属性，请不要使用 jquery.metadata.js ，我在 jQuery Validation Plugin 1.11.1 中进行了测试
