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

IT技术 javascript jquery html css jquery-validate
2021-02-19 02:57:27

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

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

干杯，马特

6个回答

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

$(".checkBox").rules("add", { 
  required:true,  
  minlength:3
});
Nvm，我错过了为所需元素定义唯一名称。不过谢谢。
2021-04-24 02:57:27
@littlegreen, .each(function() { $(this).rules("add", someOption); }) 可以工作
2021-04-29 02:57:27
2021-04-30 02:57:27
我试过这个，但它只为第一个复选框添加了类复选框的规则。是否需要像 .each() 枚举器这样的东西？
2021-05-03 02:57:27
通过这种方法，我只收到同一个类错误字段的一条错误消息。我是不是遗漏了什么，或者这就是应该的方式？
2021-05-13 02:57:27

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

打电话之前 

$(form).validate()

像这样使用：

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

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

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

这是一个更好的解决方案，虽然我不知道为什么你不能通过设置
2021-04-25 02:57:27
@RicardoS 这仍然有效吗？出于某种原因，我无法让它发挥作用。有没有另一种方法可以做同样的事情？
2021-05-13 02:57:27
@saleem 我真的不确定。我最近没有使用它，答案是8年前。但是检查他们的文档，这仍然存在： jqueryvalidation.org/jQuery.validator.addClassRules
2021-05-14 02:57:27

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

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

此方法不需要您在此调用上方具有验证方法。

希望这对将来的人也有帮助。来源在这里。

这是使用jQuery的解决方案：

    $().ready(function () {
        $(".formToValidate").validate();
        $(".checkBox").each(function (item) {
            $(this).rules("add", {
                required: true,
                minlength:3
            });
        });
    });
你测试过这段代码吗？它使所有带有“复选框”类的复选框都需要。
2021-04-25 02:57:27
否决了使用 addClassRules 可以完美运行的每个函数的投票。
2021-05-10 02:57:27
要求：函数（元素）{返回（$（'input：checkbox.checkbox：checked'）。长度== 0）；}, 可以改进一下。
2021-05-13 02:57:27

这是我的解决方案（不需要 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>
嗨，这太棒了 - 感谢 Delan 的回复，但是，表单的其余部分（我没有展示）也使用 jQuery - 所以如果我可以在这个例子中使用 jQuery，我更喜欢它，因为它都需要同时进行验证。
2021-05-05 02:57:27
其它你可能感兴趣的问题
上一篇为什么向后迭代数组比向前迭代快 下一篇使用 angular 2 中的 http.get() 从本地文件加载 json