jQuery Validation Plugin - 添加适用于多个字段的规则

Question

我正在使用jQuery Validation插件:

我有一个大型的几个字段,我想应用相同的规则.我简化了这个例子的代码.这段代码不起作用,但我想做这样的事情.第二条规则应适用于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
            }
          }
       });

提前致谢.

Answer 1

出于我的例子的目的,这是基本的起始代码:

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
        }
    }
});

http://jsfiddle.net/9W3F7

选项1a) 您可以提取规则组并将它们组合成公共变量.

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()以无限多种方式重新组合它们.

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:

<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
    }
});

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

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

该.rules()方法必须被调用任何时间后调用.validate().

jQuery的:

$('#myForm').validate({
    // your other plugin options
});

$('[name*="field"]').each(function() {
    $(this).rules('add', {
        required: true,
        number: true
    });
});

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

文档:

• rules('add') 方法

• addClassRules 方法