我们如何才能按类指定jQueryvalidation插件的规则？
jQueryvalidation插件工作的很好，很容易使用：
$(".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中的服务器生成的控件）指定规则是不现实的。 是否可以指定适用于所有元素的规则？ 或者我可以使用类select器吗？
我尝试了以下，但它不起作用：
$("#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" } } });
这没有任何语法错误 – 插件工作，但它忽略了规则/自定义消息。 有没有人在这里使用jQueryvalidation插件？ 如果是这样，你如何将规则/自定义消息应用到多个元素？
谢谢！
就我的例子而言，这是基本的起始代码：
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() 之后调用.rules()方法。
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）您可以抽出一组规则并将其组合为常用variables。
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将是不less于3的所需数字。 -
field_2将只是一个必需的数字。 -
field_3将是一个不超过99的必填数字。 -
field_4将是3到99之间的所需数字。
DEMO ： http : //jsfiddle.net/rq5ra/5/
你可以使用addClassRules ，如：
jQuery.validator.addClassRules("name", { required: true, minlength: 2 });jQuery.validator.addClassRules("name", { required: true, minlength: 2 });
jQuery.validator.addClassRules(); 将附加validation类，但没有消息的选项，它会使用一般的错误消息。
如果你想这样做，那么你应该重构这样的规则
$.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 } );
在此之前，您必须包含查询文件
$("#myform_name").validate({ onfocusout: function(element) { $(element).valid(); } , rules:{ myfield_name: { required:true }, onkeyup: false, messages: { myoffer: "May not be empty"} }); });
替代方法：
$.validator.addMethod("cMaxlength", function(value, element, param) { return $.validator.methods.maxlength.call(this, value, element, param[1]); }, '{0}');
$.validator.addMethod("cMaxlength", function(value, element, param) { return $.validator.methods.maxlength.call(this, value, element, param[1]); }, '{0}');
我已经build立在Starx的答案上，创build一个可重复使用的易用函数，它使用默认的方法并为特定的类创build新的错误消息。 考虑到一个事实，即你的特定的类只会被用来覆盖消息，一旦你不应该有任何冲突重复使用这个许多不同的类名使用任何现有的方法。
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) ); };
validation类为“validation-class-firstname”的用法示例：
CreateValidation('validation-class-firstname', 'Please enter first name', 'required');
您可以使用addClassRules方法添加类规则：
例如
$.validator.addClassRules("your-class", { required: true, minlength: 2 });
https://jqueryvalidation.org/jQuery.validator.addClassRules/
在此之前，您必须包含查询文件
$("#myform_name").validate({ onfocusout: function(element) { $(element).valid(); } , rules:{ myfield_name: { required:true }, onkeyup: false, messages: { myoffer: "May not be empty" } } });
