Question

我想使用jquery validate插件验证表单，但是我无法在html中使用'name'值 - 因为这是服务器应用程序也使用的字段。具体来说，我需要限制从组中检查的复选框的数量。（最多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  }  
   }   
});

是否可以这样做 - 有没有一种方法可以在规则选项中定位类而不是名称？或者我是否必须添加自定义方法？

干杯，马特

Answer 1

您可以使用.rules("add", options)基于该选择器添加规则，只需从验证选项中删除您想要基于类的任何规则，并在调用$(".formToValidate").validate({... });后执行此操作：

$(".checkBox").rules("add", { 
  required:true,  
  minlength:3
});

Answer 2

另一种方法是使用 addClassRules 。它特定于类，而使用选择器和.rules的选项更通用。

致电

之前

$(form).validate()

像这样使用：

jQuery.validator.addClassRules('myClassName', {
        required: true /*,
        other rules */
    });

参考：http://docs.jquery.com/Plugins/Validation/Validator/addClassRules#namerules

对于这样的情况，我更喜欢这种语法。

Answer 3

我知道这是一个老问题。但是我最近也需要相同的一个，我从stackoverflow得到了这个问题+来自这个博客的另一个答案。博客中的答案更直接，因为它专门针对这种验证。这是怎么做的。

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

此方法不要求您在此调用之上使用验证方法。

希望这也将有助于未来的某些人。来源here。

Answer 4

以下是使用jQuery的解决方案：

    $().ready(function () {
        $(".formToValidate").validate();
        $(".checkBox").each(function (item) {
            $(this).rules("add", {
                required: true,
                minlength:3
            });
        });
    });

Answer 5

这是我的解决方案（不需要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>末尾的脚本块中，该片段将发挥其魔力，将最多检查的复选框数量限制为三个（或您指定的任何数字）。

在这里，我甚至会给你一个测试页面（将其粘贴到文件中并尝试）：

<!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>

Answer 6

因为对我来说，一些元素是在页面加载时创建的，有些是由用户动态添加的;我用它来确保一切都保持干燥。

在提交时，使用类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
        });
    });
});

Answer 7

如果你想添加自定义方法，你可以这样做

（在这种情况下，至少选中了一个复选框）

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

jQuery验证使用类而不是名称值

7 个答案: