Question

我有两个或更多文本字段，我想对它们应用相同的属性，避免写两次或多次相同的代码

这不起作用：

$("#form").validate({  
    rules:  
    {
    'name', 'surname':{  
        required: true,  
        minlength: 3,
        maxlength: 50   
        }
    }
});

任何想法？

Answer 1

将css类应用于所有字段

$(".cssClassName").rules("add", {
        required: true,  
         minlength: 3,
          maxlength: 50 ,
        messages:
   {required:"error1",minlength:"error2",maxlength:"error3"}});

Answer 2

将属性定义为变量，然后使用它：

var name_reqs = {  
     required: true,  
    minlength: 3,
    maxlength: 50   
};

$("#form").validate({  
    rules: {
           'name': name_reqs,
        'surname': name_reqs
    }
});

Answer 3

尝试这样

var ruleSet1 = {
        required: true,  
        minlength: 3,
        maxlength: 50
    };

$('#form').validate({
    rules: {
        field_1: ruleSet1,
        field_2: ruleSet1,
        field_3: ruleSet1
    }
});

或者像以下一样逐一进行，

$("#form").validate({  
    rules:  
    {
    name: { required: true },
    surname:{  
        required: true,  
        minlength: 3,
        maxlength: 50   
        }
    }
});

Answer 4

显然，有几种方法可以做到这一点但是如果你使用class rule:

$.validator.addClassRules("name", {
  required: true,  
  minlength: 3,
  maxlength: 50
});

然后你可以设置你的规则

$("#form").validate({  
    rules:  
    {
     firstname : name, 
     surname : name
    }
});

或使用类名设置规则：

<input id="firstname" name="firstname" class="name">
<input id="surname" name="surnname" class="name">

此方法在jQuery验证通用指南的refactoring rules部分中进行了讨论。

Answer 5

取自my previous answer：

出于我的例子的目的，这是基本的起始代码：

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

DEMO ：http://jsfiddle.net/rq5ra/

选项1a）您可以根据所需的通用规则为您的字段分配类，然后将这些规则分配给类。您也可以分配自定义消息。

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" />

在调用.validate()后，.rules('add') method 必须被称为，必须使用.each()来定位所有class元素1}}。

jQuery的：

$('#myForm').validate({ // your other plugin options }); $('.num').each(function() { $(this).rules('add', { required: true, number: true, messages: { required: "your custom message", number: "your custom message" } }); });

DEMO ：http://jsfiddle.net/rq5ra/1/

选项1b）与上述相同，但它不是使用class，而是匹配name属性的公共部分：

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

DEMO ：http://jsfiddle.net/rq5ra/6/

选项2a）您可以提取规则组并将它们组合成公共变量。

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

DEMO ：http://jsfiddle.net/rq5ra/4/

选项2b）与上述2a相关，但根据您的复杂程度，可以将某些群组共有的规则分开，并使用.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 var ruleSet3 = { }; $.extend(ruleSet3, ruleSet1, ruleSet2); // combines sets 2 & 1 into set 3. Defaults are included since they were already combined into sets 1 & 2 previously. $('#myForm').validate({ rules: { field_1: ruleSet2, field_2: ruleSet_default, field_3: ruleSet1, field_4: ruleSet3 } });

结束结果：

field_1将是一个不少于3的必填数字。

field_2只是必填号码。

field_3将是一个不大于99的必填数字。

field_4将是3到99之间的必需数字。

DEMO ：http://jsfiddle.net/rq5ra/5/

为更多字段设置相同的属性

5 个答案: