jQuery 验证 - 将 EqualTo 与复选框一起使用

Question

我正在为我的表单使用 jQuery 验证插件，我想使用 EqualTo 规则来确保复选框 A 的输入与复选框 B 相同。

我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <form id="form">
        <input id="A" name="A" type="checkbox"/> A<br />
        <input id="B" name="B" type="checkbox"/> B<br />
        <input type="submit" value="Submit" />
    </form>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.js"></script>
<script>
    $("#form").validate({
        rules: {
            A: {
                equalTo: "#B"
            }
        }
    });
</script>

这不符合我的预期。相反，它会在 A 被选中时提交，如果 A 未被选中则阻止提交（验证根本不依赖于 B！）

我做错了什么？

Answer 1

equalTo 方法通常用于比较两个 text 元素的 values。它并不是真的用于复选框；但即便如此，您的复选框仍缺少 value 属性。

如果我添加 value 属性，它仍然不能正常工作，因为当复选框未选中时，没有 value 可以比较并且 equalTo 规则被忽略。换句话说，为了使 equalTo 规则能够比较任何内容，两个复选框都需要已经被选中，在这种情况下，它是没有意义的。

使用 equalTo 规则意味着您希望验证在两个都被选中时通过，而在两个都未被选中时通过。

为了做到这一点，您可以使 required 规则成为条件；这取决于其他事物的状态。 A 仅在选中 B 时才需要，反之亦然。如果什么都没有勾选，就不需要任何东西，所以验证通过。

在此示例中，两个复选框都必须为 "equal"。都选中或都未选中以使验证通过。

$("#form").validate({
    rules: {
        A: {
            required: function() {
                return $('#B').is(':checked');
            }
        },
        B: {
            required: function() {
                return $('#A').is(':checked');
            }
        }
    }, ....

演示：jsfiddle.net/xdxL9ewp/

jQuery 验证 - 将 EqualTo 与复选框一起使用

jQuery Validation - Using EqualTo with checkboxes

jquery

jquery-validate