jQuery验证插件 – 添加适用于多个字段的规则

前端之家收集整理的这篇文章主要介绍了jQuery验证插件 – 添加适用于多个字段的规则前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用 jQuery Validation插件

我有几个我想要应用相同规则的大型表格。我已经简化了这个例子的代码。这段代码不起作用,但我想做这样的事情。第二条规则应适用于first_name和last_name。我想在这个函数中封装所有的规则,而不是编辑一些表单元素的类列表,以添加一个必需的类或者其他的。

(再次,我有几个不同的表单域组,我想组合不同的要求,我只需要:真正的元素为了简单起见)

@H_301_6@$('#affiliate_signup').validate( { rules: { email: { required: true,email: true },first_name,last_name: { required: true },password: { required: true,minlength: 4 } } });

提前致谢。

解决方法

为了我的例子的目的,这是基本的起始代码

HTML:

@H_301_6@<input type="text" name="field_1" /> <input type="text" name="field_2" /> <input type="text" name="field_3" />

jQuery:

@H_301_6@$('#myForm').validate({ rules: { field_1: { required: true,number: true },field_2: { required: true,field_3: { required: true,number: true } } });

http://jsfiddle.net/9W3F7

选项1a)您可以拉出规则组并将其组合成常见变量。

@H_301_6@var ruleSet1 = { required: true,number: true }; $('#myForm').validate({ rules: { field_1: ruleSet1,field_2: ruleSet1,field_3: ruleSet1 } });

http://jsfiddle.net/9W3F7/1

选项1b)与上述1a相关,但根据您的复杂程度,可以分离某些组通用的规则,并使用.extend()以无限数量的方式重组。

@H_301_6@var ruleSet_default = { required: true,number: true }; var ruleSet1 = { max: 99 }; $.extend(ruleSet1,ruleSet_default); // combines defaults into set 1 var ruleSet2 = { min: 3 }; $.extend(ruleSet2,ruleSet_default); // combines defaults into set 2 $('#myForm').validate({ rules: { field_1: ruleSet2,field_2: ruleSet_default,field_3: ruleSet1 } });

结果:

> field_1将是不少于3的必需数字。
> field_2将只是一个必需的数字。
> field_3将是不超过99的必需数字。

http://jsfiddle.net/9W3F7/2

选项2a)您可以根据所需的公共规则为您的字段分配类,然后将这些规则分配给类。使用addClassRules方法,我们将复合规则转化为类名。

HTML:

@H_301_6@<input type="text" name="field_1" class="num" /> <input type="text" name="field_2" class="num" /> <input type="text" name="field_3" class="num" />

jQuery:

@H_301_6@$('#myform').validate({ // initialize the plugin // other options }); $.validator.addClassRules({ num: { required: true,number: true } });

http://jsfiddle.net/9W3F7/4/

选项2b)与选项2a的主要区别在于,您可以通过在创建它们之后立即调用规则(‘add’)方法来将规则分配给动态创建的输入元素。您可以使用类作为选择器,但不是必需的。如下所示,我们使用通配符选择器而不是类。

调用.validate()后,任何时候都必须调用.rules()方法

jQuery:

@H_301_6@$('#myForm').validate({ // your other plugin options }); $('[name*="field"]').each(function() { $(this).rules('add',{ required: true,number: true }); });

http://jsfiddle.net/9W3F7/5/

文档:

> rules('add') method
> addClassRules method

猜你在找的jQuery相关文章