我们如何按类指定jquery验证插件的规则？

Question

在jQuery验证插件的伟大工程,是非常容易使用:

$(".selector").validate({
})

只需设置"必需的电子邮件"等css类,就会显示默认消息.

但是,我需要自定义消息.文档说您可以使用元素的键值对及其相应的消息来指定规则:

$(".selector").validate({
   rules: {
     name: "required",
     email: {
       required: true,
       email: true
     }
   },
   messages: {
     name: "Please specify your name",
     email: {
       required: "We need your email address to contact you",
       email: "Your email address must be in the format of name@domain.com"
     }
   }
})

但是,为每个表单元素指定规则是不切实际的,尤其是ASP.NET中的服务器生成的控件.是否可以指定适用于所有元素的规则？或者我可以以某种方式使用类选择器？

我尝试了以下,但它不起作用:

$("#frmMyForm").validate
({
    rules:
    {
        $(".required email"):
        {
            required: true,
            email: true
        }
    },
    messages:
    {
        $(".required email"):
        {
            required: "Please enter your email address",
            email: "Your email address must be in the format of name@domain.com"
        }
    }
});

这似乎有一个语法错误 - 插件没有做任何事情.然后我尝试了:

$("#frmMyForm").validate
({
    rules:
    {
        ".required email":
        {
            required: true,
            email: true
        }
    },
    messages:
    {
        ".required email":
        {
            required: "Please enter your email address",
            email: "Your email address must be in the format of name@domain.com"
        }
    }
});

这没有任何语法错误 - 插件工作,但它忽略了规则/自定义消息.有没有人在这里使用jQuery Validation插件？如果是这样,您是如何将规则/自定义消息应用于多个元素的？

谢谢!

Answer 1

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

HTML:

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

JS:

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

演示:http: //jsfiddle.net/rq5ra/

注意:无论下面使用哪种技术来分配规则,插件的绝对要求是每个元素都具有唯一 name属性.

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

必须在调用后调用该.rules()方法.validate()

JS:

$('#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"
        }
    });
});

演示:http: //jsfiddle.net/rq5ra/1/

选项1b) 与上面相同,但它不是使用a 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"
        }
    });
});

演示:http: //jsfiddle.net/rq5ra/6/

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

var ruleSet1 = {
        required: true,
        number: true
    };

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

演示: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之间的必需数字.

演示:http://jsfiddle.net/rq5ra/5/

Answer 2

您可以使用addClassRules,例如:

jQuery.validator.addClassRules("name", {
  required: true,
  minlength: 2
});

Answer 3

jQuery.validator.addClassRules(); 将验证附加到类,但没有消息选项,它将使用一般错误消息.

如果你想要那个,那么你应该重构这样的规则

$.validator.addMethod(
     "newEmail", //name of a virtual validator
     $.validator.methods.email, //use the actual email validator
     "Random message of email"
);

//Now you can use the addClassRules and give a custom error message as well.
$.validator.addClassRules(
   "email", //your class name
   { newEmail: true }
 );