使用jquery验证验证三重输入框电话号码字段

时间:2015-12-26 01:15:42

标签: javascript jquery jquery-validate

如果某些逻辑成立,我会尝试拨打电话号码。当逻辑确实成立时,我看到前两个电话号码字段表示即使我输入了其中的内容,也需要电话号码,只有第三个不显示错误。当我手动点击前两个字段时,错误才会消失。

我也尝试在phoneValidation方法中的前两个手机字段上调用valid()方法,但它可以理解地导致无限循环。我想我可以通过为所有三个电话盒添加不同的验证器方法来完成这项工作,但有一种优雅的方法吗?

    <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.");

1 个答案:

答案 0 :(得分:0)

我保留了原始解决方案。单击它们或提交表单时,前两个字段的验证错误就会消失。不理想,但不是表演塞!