26

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

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

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

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

4

4 回答 4

39

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

例子：

<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();
于 2013-03-30T11:06:09.150 回答
2

从文档http://jqueryvalidation.org/rules：

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

  • 可以将不带参数的验证方法指定为元素上的类（推荐）
  • 带参数的验证方法可以指定为属性（推荐）
  • 两者都可以使用元数据插件指定为元数据 [[[请注意，这已被弃用，因此文档似乎有点过时]]]
  • 两者都可以使用 validate() 方法的规则选项指定

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

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

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

于 2013-12-09T22:27:14.827 回答
1

在回答您的具体问题时：

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

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

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

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

于 2013-01-24T14:37:44.980 回答
0

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

于 2013-08-07T10:26:05.873 回答