jQuery 屏蔽输入插件与验证插件冲突答案

【问题标题】：jQuery masked input plugin conflicts with validation pluginjQuery 屏蔽输入插件与验证插件冲突
【发布时间】：2012-04-28 18:44:31
【问题描述】：

给定一个使用 Masked Input 插件屏蔽并被验证插件标记为必填字段的文本框，请考虑以下事项：

如果你把焦点放在一个被屏蔽的文本框中，然后不输入任何信息就离开（或者没有输入足够的信息来满足屏蔽），被屏蔽的输入插件将删除所有内容，留下一个空白文本框。

$("#phoneNumber").mask("(999) 999-9999? x999999");
$("#sampleForm").validate({
    rules: {
        phoneNumber: "required"
    }
});

验证插件似乎在屏蔽输入插件之前触发了它的 blur 事件。这会导致文本框通过验证（因为它确实有文本），然后被屏蔽的输入插件启动并删除文本。字段失去焦点后应立即标记为无效。

我尝试过使用正则表达式验证器。它接近了，但又一次，因为它在被屏蔽的输入插件清理字段之前触发，它在不应该显示错误时显示错误（尽管当用户尝试提交表单时错误消失）。

我也试过这个：

$('input').bind('unmasked.maskedInput', function () { $(this).valid(); });

这可行，但它也会干扰验证器的初始行为：在按下提交按钮之前不会验证字段，然后在失去焦点时验证它们。

我设置了一个jsFiddle，描述了我遇到的问题。

【问题讨论】：

标签： jquery jquery-validate maskedinput

【解决方案1】：

Hiya 工作演示 http://jsfiddle.net/2hdTn/

Cooleos 所以如果我做对了，蒙面插件会删除输入，因此会造成混乱。 :)

在上面的示例演示中，输入的数字将保持输入状态，您可以使用它进行验证。

哦，如果这有帮助，别忘了接受答案并投票。

也见这里：还有clearEmpty: falsehttp://view.jqueryui.com/mask/tests/visual/mask/mask.html

您可能只需要将整个掩码设为可选，bingo 就可以了 :)

（如果我遗漏了什么，请告诉我）

Jquery 代码

jQuery.validator.addMethod("usPhoneFormat", function (value, element) {
    return this.optional(element) || /^\(\d{3}\) \d{3}\-\d{4}( x\d{1,6})?$/.test(value);
}, "Enter a valid phone number.");

$.fn.ready(function () {

    $("#sampleForm").validate({
        rules: {
            phoneNumber: "required",
            phoneNumberRegEx: {
                usPhoneFormat: true,
                required: true
            },
            phoneNumberReg: "required"
        },
        submitHandler: function (form) {
            alert("submitted.");
        }
    });
    $(".phone").mask("?(999) 999-9999 x999999");
    //alert('foo');
});

【讨论】：

如果不使用正则表达式验证器，那么任何数字都将被接受（有效或无效）。使整个字符串可选也不起作用，因为如果您不输入扩展名，则会留下“x”。
嗨，如果不需要，您可以随时删除 x：请参阅此处：jsfiddle.net/2hdTn/4 如果这适用于您的情况，请告诉我，祝您好运！
@user3097736 什么不起作用？ jsfiddle.net/2hdTn 转到此小提琴并点击提交，您将看到验证器正在运行。 :))

【解决方案2】：

您可以在 focusout/blur 上重新验证输入。

$('#inputId').on('blur', function(){
    $('#formId').validate().element('#inputId')
});

【讨论】：

【解决方案3】：

phone_no:{
    icon: 'false',
    validators: {
        notEmpty: {
            message: 'Contact Phoneno is required'
        },
        regexp: {
            regexp: /^\d{3}\-\d{3}\-\d{4}$/,
            message: 'Please Enter Valid Phone number'
        }
    }
}

在 formvalidator 上输入这个就可以了

【讨论】：