Question

我正在为我的表单使用jQuery Validation Plugin，我想使用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 元素的值。它并不是真正意义上的复选框;但即便如此，您的复选框也缺少value属性。

如果我添加value属性，它仍然无法正常工作，因为如果未选中该复选框，则无法比较value，并忽略equalTo规则。换句话说，两个复选框都需要已经检查，以便equalTo规则比较任何东西，在这种情况下，它是没有意义的。

使用equalTo规则意味着您希望在检查两者时传递验证，并在未选中两者时传递验证。

为了做到这一点，你可以使required规则有条件;这取决于其他东西的状态。只有在选中A时才需要B，反之亦然。如果没有检查任何内容，则不需要任何内容，因此验证通过。

在此示例中，两个复选框必须“相等”。已选中或两者都未选中以进行验证通过。

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

DEMO：jsfiddle.net/xdxL9ewp/

jQuery验证 - 使用带复选框的EqualTo

1 个答案: