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

Question

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@example.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@example.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@example.com"
        }
    }
});

这没有任何语法错误 - 插件可以工作，但它忽略了规则/自定义消息。这里有人用过 jQuery 验证插件吗？如果是这样，您如何将规则/自定义消息应用于多个元素？

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) 与上面相同，但它不使用 class，而是匹配 name 属性的公共(public)部分:

$('[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) 您可以提取规则组并将它们组合成公共(public)变量。

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/