我们如何通过类来指定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/

原文地址：https://www.jb51.cc/jquery/184547.html

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

解决方法

相关推荐