使用 jquery validate 验证三重输入框 phone 数字字段

Question

如果某些逻辑成立，我正在尝试使 phone 成为必需的数字。当逻辑确实成立时，我看到前两个 phone 数字字段说 phone 数字是必需的，即使我在其中输入了一些东西，只有第三个没有显示错误。只有当我手动单击前两个字段时，错误才会消失。

我还尝试在 phone 验证方法中的前两个 phone 字段上调用 valid() 方法，但它导致了无限循环，这是可以理解的。我想我可以通过为所有三个 phone 框添加不同的验证器方法来完成这项工作，但是有没有一种优雅的方法来做到这一点？

    <div class="form-inline" style="margin-top: 5px;">
        <input type="text" name="phone1" id="phone1" class="form-control" maxlength="3" size="3" />&nbsp;-&nbsp;
        <input type="text" name="phone2" id="phone2" class="form-control" maxlength="3" size="3" />&nbsp;-&nbsp;
        <input type="text" name="phone3" id="phone3" class="form-control" maxlength="4" size="4" />
    </div>

JS

     $("#thisForm").validate({
        rules: {
            "phone1" : { maxlength: 3, minlength: 3, digits: true, phoneValidation: true},
            "phone2" : { maxlength: 3, minlength: 3, digits: true, phoneValidation: true},
            "phone3" : { maxlength: 4, minlength: 4, digits: true, phoneValidation: true}
        }
     });


    $.validator.addMethod("phoneValidation", function(value, element) {
        // some logic
        if ($("#someField").is(":checked"))
            return true;

        if (!$("#phone1").val() || !$("#phone2").val() || !$("#phone3").val()) {
            return false;
        }

        return true;
    }, "phone is required.");

Answer 1

我保留了原来的解决方案。当您单击它们或提交表单时，前两个字段的验证错误就会消失。不理想，但不能阻止表演！

使用 jquery validate 验证三重输入框 phone 数字字段

Validate triple input box phone number field with jquery validate

javascript

jquery

jquery-validate