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

DEMO ：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" } }); });

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/

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

Answer 4

替代方法：

＆＃13;

$.validator.addMethod("cMaxlength", function(value, element, param) {
		
	return $.validator.methods.maxlength.call(this, value, element, param[1]);

}, '{0}');

＆＃13;

要点：https://gist.github.com/uhtred/833f3b957d61e94fbff6

＆＃13;

$.validator.addClassRules({
    'credit-card': {
    	cMaxlength: [ 'Invalid number.', 19 ]
    }
});

＆＃13;

Answer 5

＆＃13;

$.validator.addMethod("cMaxlength", function(value, element, param) {
		
	return $.validator.methods.maxlength.call(this, value, element, param[1]);

}, '{0}');

＆＃13;

Answer 6

我建立在Starx的答案之上，创建了一个易于使用的可重复使用的函数，该函数使用默认方法并为特定类创建新的错误消息。考虑到这样一个事实，即一旦你不应该使用任何现有方法对许多不同的类名重复使用，你的特定类将仅用于覆盖消息。

var CreateValidation = function(className, customMessage, validationMethod){
  var objectString = '{"'+ className +'": true}',
  validator = $.validator;

  validator.addMethod(
    className,
    validator.methods[validationMethod],
    customMessage
  );
  validator.addClassRules(
    className,
    JSON.parse(objectString)
  );
};

用法示例，验证类为＆＃34; validation-class-firstname＆＃34;：

CreateValidation('validation-class-firstname', 'Please enter first name', 'required');

Answer 7

您可以使用addClassRules方法添加类规则：

E.g。

$.validator.addClassRules("your-class", {
  required: true,
  minlength: 2
});

https://jqueryvalidation.org/jQuery.validator.addClassRules/

Answer 8

$.validator.addMethod("cMaxlength", function(value, element, param) {
		
	return $.validator.methods.maxlength.call(this, value, element, param[1]);

}, '{0}');

Answer 9

在此之前，您必须包含查询文件

$("#myform_name").validate({
    onfocusout: function(element) { $(element).valid(); } ,
    rules:{
       myfield_name: {
          required:true
       },
       onkeyup: false,
       messages: {
          myoffer: "May not be empty"
       }
    }
});

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

9 个答案: