jquery - 声明 jQuery Validate 插件规则 - 属性 vs. 类 vs. 代码

Question

在 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 类一起使用？)。

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

Answer 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();