我们如何通过类来指定jquery验证插件的规则?

前端之家收集整理的这篇文章主要介绍了我们如何通过类来指定jquery验证插件的规则?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
jQuery Validation plugin工作伟大,是非常容易使用:
$(".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,messages:
    {
        ".required email":
        {
            required: "Please enter your email address",email: "Your email address must be in the format of name@domain.com"
        }
    }
});

这没有任何语法错误插件工作,但它忽略了规则/自定义消息。有没有人在这里使用jQuery验证插件?如果是,您是如何应用规则/自定义消息到多个元素?

谢谢!

解决方法

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

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,field_3: {
            required: true,number: true
        }
    }
});

演示: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" />

.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)与上面相同,但是不使用类,它匹配name属性的公共部分:

$('[name*="field"]').each(function() {
    $(this).rules('add',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/

猜你在找的jQuery相关文章