6

给定一个使用Masked Input插件屏蔽的文本框，并由 Validation Plugin 标记为必填字段，请考虑以下内容：

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

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

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

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

我也试过这个：

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

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

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

4

3 回答 3

7

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

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

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

哦，如果这有帮助，请不要忘记接受答案并投票。

另见这里：还有clearEmpty: false http://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');
});

​
于 2012-04-29T07:25:58.953 回答
2

您可以重新验证焦点输出/模糊的输入。

$('#inputId').on('blur', function(){
    $('#formId').validate().element('#inputId')
});
于 2015-10-27T10:55:19.107 回答
1 
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 上输入这个，就可以正常工作了

于 2016-06-20T20:13:50.010 回答