jQueryvalidation插件 – 添加适用于多个字段的规则
我正在使用jQueryvalidation插件:
我有几个字段,我想要应用相同的规则。 我简化了这个例子的代码。 此代码不起作用,但我想要做这样的事情。 第二个规则应该适用于first_name
和last_name
。 我想在这个函数中封装所有的规则,而不是编辑一些表单元素的类列表来添加一个需要的类或者其他东西。
(同样,我有几组不同的需求组成的表单域,为了简单起见,我只把这个要素required: true
)
$('#affiliate_signup').validate( { rules: { email: { required: true, email: true }, first_name,last_name: { required: true }, password: { required: true, minlength: 4 } } });
提前致谢。
就我的例子而言,这是基本的起始代码:
HTML:
<input type="text" name="field_1" /> <input type="text" name="field_2" /> <input type="text" name="field_3" />
jQuery的:
$('#myForm').validate({ rules: { field_1: { required: true, number: true }, field_2: { required: true, number: true }, field_3: { required: true, number: true } } });
选项1a)您可以抽出规则组并将它们组合成通用variables。
var ruleSet1 = { required: true, number: true }; $('#myForm').validate({ rules: { field_1: ruleSet1, field_2: ruleSet1, field_3: ruleSet1 } });
选项1b)与上面的1a相关,但取决于您的复杂程度,可以将某些组所共有的规则分开,并使用.extend()
以无限多种方式进行重组。
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
将是不less于3的所需数字。 -
field_2
将只是一个必需的数字。 -
field_3
将是一个不超过99的必填数字。
选项2a)您可以根据所需的通用规则将类分配给您的字段,然后将这些规则分配给类。 使用addClassRules
方法,我们正在把复合规则变成一个类名。
HTML:
<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的:
$('#myform').validate({ // initialize the plugin // other options }); $.validator.addClassRules({ num: { required: true, number: true } });
选项2b)与选项2a的主要区别在于,您可以使用它在创buildinput元素后立即调用rules('add')
方法来为dynamic创build的input元素分配规则。 你可以使用class
作为select器,但它不是必需的。 正如你在下面看到的,我们使用了通配符而不是class
。
必须 在调用.rules()
之后调用.rules()
方法。
jQuery的:
$('#myForm').validate({ // your other plugin options }); $('[name*="field"]').each(function() { $(this).rules('add', { required: true, number: true }); });
文档:
-
rules('add')
方法 -
addClassRules
方法
你可以用这种方式使用'getter'语法:
{ rules: { email: { required: true, email: true }, first_name: { required: true }, get last_name() {return this.first_name}, password: { required: true, minlength: 4 } } }