javascript - validate.js 库的复选框验证是否已损坏？

Question

我需要向 HTML5 表单添加客户端表单验证。我不想破解我自己的解决方案，而且我不使用 Angular。

由于我使用的是 HTML5，因此 pattern 和 required 属性组合起来涵盖了基本验证。

但是，在需要自定义验证的情况下，例如，需要勾选特定的复选框组合 - 我需要更多内容。

快速的网络搜索将我带到了 The 10 Best JavaScript Libraries for Form Validation and Formatting .

我测试了Validate.js并在验证复选框时遇到问题。 Validate.js通过名称绑定(bind)到特定的表单元素，例如

var validator = new FormValidator('example_form', [{
    name: 'req',
    rules: 'required'
});

对应的HTML表单:

<form name="example_form">
<input name="req" />
</form>

我决定将其应用于一组复选框并实现我自己的自定义规则 ( documented on Validate.js ):

 <form name="example_form">
    <input type="checkbox" name="test" value="a">
    <input type="checkbox" name="test" value="b">
    <input type="checkbox" name="test" value="c">
</form>

首先，验证器配置对象添加我的自定义规则:

var validator = new FormValidator('example_form', [{
    name: 'test',
    rules: 'callback_my_rule'
});

...请注意，required 规则(开箱即用提供)已消失，并已被我自己的规则 callback_my_rule 取代。接下来，我定义了 my_rule (根据文档，callback_ 前缀被删除):

validator.registerCallback('my_rule', function(value) {
    var atLeastOne = ($('[name="test"]:checked').length > 0);
    return atLeastOne;
});

返回值False表示验证失败，而True表示验证有效。

问题是，如果没有勾选任何复选框，我的自定义验证函数 my_rule 永远不会被调用。仅当我勾选复选框时才会调用该函数。仅在勾选复选框时调用自定义验证函数似乎不直观。

Validate.js documentation提供了带有复选框的示例表单，但是示例代码中省略了复选框验证函数:

但是，示例表单确实验证了该复选框，挖掘 Validate.js documentation 的来源，我看到该复选框使用了开箱即用的 required 规则:

问题

• 有人让 Validate.js 使用复选框和自定义吗验证函数？
• 是否有更好的自定义表单库验证？

Answer 1

我已经测试过Jquery Validation Plugin并且就像带有复选框的魅力一样!

演示链接 http://jsfiddle.net/K6Wvk/

   $(document).ready(function () {

        $('#formid').validate({ // initialize the plugin
            rules: {
                'inputname': {
                    required: true,
                    maxlength: 2
                }
            },
            messages: {
                'inputname': {
                    required: "You must check at least 1 box",
                    maxlength: "Check no more than {0} boxes"
                }
            }
        });

    });