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

Question

提问by Please click here

The jQuery Validation pluginworks great and is very easy to use:

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

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

Just by setting css classes like "required email", the default message will be displayed.

只需设置诸如“所需电子邮件”之类的 css 类，就会显示默认消息。

However, I need to customize the messages. The documentation says you can specify rules using a key-value pair for elements and their corresponding messages:

但是，我需要自定义消息。该文档说您可以使用元素及其相应消息的键值对指定规则：

$(".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 [email protected]"
     }
   }
})

But, it is not practical to specify a rule for every form element, especially server-generated controls in ASP.NET. Is it possible to specify rules that would apply to ALL elements? Or can I use a class selector somehow?

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

I tried the following, but it didn't work:

我尝试了以下方法，但没有奏效：

$("#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 [email protected]"
        }
    }
});

That seemed to have a syntax error - the plugin didn't do anything. Then I tried:

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

$("#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 [email protected]"
        }
    }
});

This didn't have any syntax error - the plugin worked, but it ignored the rules/custom messages. Has anyone here used jQuery Validation plugin? If so, how did you apply rules/custom messages to multiple elements?

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

Thanks!

谢谢！

Answer 1

回答by Sparky

For the purposes of my example, this is the base starting code:

就我的示例而言，这是基本的起始代码：

HTML:

HTML：

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

JS:

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/

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

NOTE: No matter which technique below is used to assign rules, it's an absolute requirement of the plugin that every element has a uniquenameattribute.

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

Option 1a)You can assign classes to your fields based on desired common rules and then assign those rules to the classes. You can also assign custom messages.

选项 1a)您可以根据所需的通用规则为您的字段分配类，然后将这些规则分配给类。您还可以分配自定义消息。

HTML:

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

The .rules()method mustbe called afterinvoking .validate()

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

JS:

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/

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

Option 1b)Same as above, but instead of using a class, it matches a common part of the name attribute:

选项 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"
        }
    });
});

DEMO: http://jsfiddle.net/rq5ra/6/

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

Option 2a)You can pull out the groups of rules and combine them into common variables.

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

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

Option 2b)Related to 2a above but depending on your level of complexity, can separate out the rules that are common to certain groups and use .extend()to recombine them in an infinite numbers of ways.

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

End Result:

最终结果：

field_1will be a required number no less than 3.
field_2will just be a required number.
field_3will be a required number no greater than 99.
field_4will be a required number between 3 and 99.

field_1将是一个不小于 3 的必需数量。
field_2将只是一个必需的数字。
field_3将是不大于 99 的必需数字。
field_4将是 3 到 99 之间的必需数字。

DEMO: http://jsfiddle.net/rq5ra/5/

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

Answer 2

回答by Sudhir Bastakoti

You could use addClassRules, like:

您可以使用addClassRules，例如：


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

Answer 3

回答by Starx

jQuery.validator.addClassRules();will attach the validation to class, but there is no option for messages, it will use the general error messages.

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

If you want that to work then, you should refactor the rules like this

如果你想让它工作，你应该像这样重构规则

$.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

回答by Daniel Fran?a

Alternative approach:

替代方法：

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

}, '{0}');

Gist: https://gist.github.com/uhtred/833f3b957d61e94fbff6

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

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

Answer 5

回答by Jaimin Soni

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

}, '{0}');

Answer 6

回答by TheRumIsGone

I've built upon Starx's answer to create a repeatable easy to use function that uses the default methods and creates new error messages for specific classes. considering the fact that your specific class will only be used to override the message once you shouldn't have any conflicts reusing this for many different class names using any existing methods.

我已经基于 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)
  );
};

Usage Example with validation class being "validation-class-firstname":

验证类为“validation-class-firstname”的用法示例：

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

Answer 7

回答by user3539640

You can add class rules using the addClassRules method:

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

E.g.

例如

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

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

Answer 8

回答by alok patel

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

}, '{0}');

Answer 9

回答by dev4092

Before this you have to include Query file

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

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

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

提问by Please click here

回答by Sparky

回答by Sudhir Bastakoti

回答by Starx

回答by Daniel Fran?a

回答by Jaimin Soni

回答by TheRumIsGone

回答by user3539640

回答by alok patel

回答by dev4092

相关推荐

最近更新

标签

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

提问by Please click here

回答by Sparky

回答by Sudhir Bastakoti

回答by Starx

回答by Daniel Fran?a

回答by Jaimin Soni

回答by TheRumIsGone

回答by user3539640

回答by alok patel

回答by dev4092

相关推荐

非常简单的 jQuery Div 滑块

返回 False 在 jQuery.ajax 中不起作用

jQuery 从元素中删除特定文本

jQuery 成功的 getJSON 操作后 data.length 未定义

相关推荐

最近更新

标签