使用类而不是名称值的jQueryvalidation
我想使用jQueryvalidation插件validation表单，但是我无法使用html中的“name”值，因为这是服务器应用程序也使用的字段。 具体来说，我需要限制从一个组中选中的checkbox的数量。 （最大值为3.）所有我见过的例子，使用每个元素的name属性。 我想要做的就是使用这个类，然后为此声明一个规则。
HTML
这工作：
<input class="checkBox" type="checkbox" id="i0000zxthy" name="salutation" value="1" /> 这不起作用，但是我正在瞄准的是：
<input class="checkBox" type="checkbox" id="i0000zxthy" name="i0000zxthy" value="1" />
JavaScript的：
var validator = $(".formToValidate").validate({ rules:{ "salutation":{ required:true, }, "checkBox":{ required:true, minlength:3 } } });
是否有可能做到这一点 – 是否有一种方法，在规则选项中定位类而不是名称？ 或者我必须添加一个自定义的方法？
干杯，马特
您可以使用.rules("add", options)基于该select器的规则，只需从您的validation选项中移除您想要的类的任何规则，然后调用$(".formToValidate").validate({... }); ， 做这个：
$(".checkBox").rules("add", { required:true, minlength:3 });
另一种方法是使用addClassRules 。 这是特定的类，而select使用select器和.rules更通用的方式。
打电话之前
$(form).validate()
像这样使用：
jQuery.validator.addClassRules('myClassName', { required: true /*, other rules */ });
参考： http : //docs.jquery.com/Plugins/Validation/Validator/addClassRules#namerules
我比较喜欢这种语法。
我知道这是一个古老的问题。 但我最近也需要相同的，我从这个博客的另一个答案从stackoverflow +这个问题。 博客中的答案更直接，因为它特别专注于这种validation。 这是如何做到这一点。
$.validator.addClassRules("price", { required: true, minlength: 2 });
这个方法不要求你在这个调用上面有validate方法。
希望这将有助于未来的人。 来源于此 。
这里是使用jQuery的解决scheme：
$().ready(function () { $(".formToValidate").validate(); $(".checkBox").each(function (item) { $(this).rules("add", { required: true, minlength:3 }); }); });
这是我的解决scheme（不需要jQuery …只是JavaScript）：
function argsToArray(args) { var r = []; for (var i = 0; i < args.length; i++) r.push(args[i]); return r; } function bind() { var initArgs = argsToArray(arguments); var fx = initArgs.shift(); var tObj = initArgs.shift(); var args = initArgs; return function() { return fx.apply(tObj, args.concat(argsToArray(arguments))); }; } var salutation = argsToArray(document.getElementsByClassName('salutation')); salutation.forEach(function(checkbox) { checkbox.addEventListener('change', bind(function(checkbox, salutation) { var numChecked = salutation.filter(function(checkbox) { return checkbox.checked; }).length; if (numChecked >= 4) checkbox.checked = false; }, null, checkbox, salutation), false); });
把它放在<body>末尾的脚本块中，这个片段会发挥它的魔力，将最多检查的checkbox的数量限制为三个（或者你指定的任何数字）。
在这里，我甚至会给你一个testing页面（粘贴到一个文件，并尝试它）：
<!DOCTYPE html><html><body> <input type="checkbox" class="salutation"> <input type="checkbox" class="salutation"> <input type="checkbox" class="salutation"> <input type="checkbox" class="salutation"> <input type="checkbox" class="salutation"> <input type="checkbox" class="salutation"> <input type="checkbox" class="salutation"> <input type="checkbox" class="salutation"> <input type="checkbox" class="salutation"> <input type="checkbox" class="salutation"> <script> function argsToArray(args) { var r = []; for (var i = 0; i < args.length; i++) r.push(args[i]); return r; } function bind() { var initArgs = argsToArray(arguments); var fx = initArgs.shift(); var tObj = initArgs.shift(); var args = initArgs; return function() { return fx.apply(tObj, args.concat(argsToArray(arguments))); }; } var salutation = argsToArray(document.getElementsByClassName('salutation')); salutation.forEach(function(checkbox) { checkbox.addEventListener('change', bind(function(checkbox, salutation) { var numChecked = salutation.filter(function(checkbox) { return checkbox.checked; }).length; if (numChecked >= 3) checkbox.checked = false; }, null, checkbox, salutation), false); }); </script></body></html>
因为对我来说，一些元素是在页面加载时创build的，有些是由用户dynamic添加的; 我用这个来确保一切都保持干爽。
在提交时，find所有与类x，删除类x，添加规则x。
$('#form').on('submit', function(e) { $('.alphanumeric_dash').each(function() { var $this = $(this); $this.removeClass('alphanumeric_dash'); $(this).rules('add', { alphanumeric_dash: true }); }); });
如果你想添加自定义方法，你可以做到这一点
（在这种情况下，至less选中一个checkbox）
<input class="checkBox" type="checkbox" id="i0000zxthy" name="i0000zxthy" value="1" onclick="test($(this))"/>
在Javascript中
var tags = 0; $(document).ready(function() { $.validator.addMethod('arrayminimo', function(value) { return tags > 0 }, 'Selezionare almeno un Opzione'); $.validator.addClassRules('check_secondario', { arrayminimo: true, }); validaFormRichiesta(); }); function validaFormRichiesta() { $("#form").validate({ ...... }); } function test(n) { if (n.prop("checked")) { tags++; } else { tags--; } }
