jQuery 屏蔽输入 - 是否可以检索掩码



我正在使用jQuery屏蔽输入插件和jQuery验证插件。当表单的字段失去焦点时,jQuery 验证插件会显示一条消息,但绑定到掩码的字段不会发生这种情况,可能是因为发生了模糊事件并验证了该字段是否为空,实际上该字段是用掩码填充的。

所以我覆盖了验证插件的必需方法,以便也验证掩码。由于我有电话掩码,因此我无法对掩码进行硬编码,因此我必须在插件中调用一个方法,该方法返回绑定到字段的掩码。我没有找到屏蔽输入插件的文档,也没有人解决我的问题。

有谁知道是否有一种方法可以将绑定到字段的掩码本身返回给我?

我对电话字段使用屏蔽输入,并验证是否存在带有minlength的电话号码,如下所示:

phone: {
    required:  true,
    minlength: 17
},

我的面具看起来像这样:

+1 (XXX) XXX-XXXX

考虑到插件(jQuery屏蔽输入插件)的构建方式,Tomanow的方法就是要走的路。

如果输入大小只能具有与掩码相同的字符数。

我建议这种方法:

补充插件

(function($) {
$.fn.extend({
        mask2: function(mask, settings){
           //store in data
            this.data('data-mask',mask);
            this.data('data-maskLength', mask.length);
            //add data attributes as html markups (optional)
            this.attr('data-mask',mask);
            this.attr('data-maskLength', mask.length);
           // add validator rule (see section add custom method; i haven't test it yet you can remove it if necessary)
            $( "#myinput" ).rules( "add", {
               maskRule: true
            });
           // add original mask plugin
           return this.mask(mask, settings);
        }
});    
})(jQuery);

现在不使用面具,而是使用掩码2

$("#date").mask2("99/99/9999");

添加自定义验证方法

最简单的方法是使用 data-maskLength 键 ,(您可能需要将其放在顶部):

jQuery.validator.addMethod("maskRule", function(value, element, params) {
  return value.length == element.data("data-maskLength");
}

我还没有测试验证方法,但至少你可以检索掩码或其长度

你可以看到我在 JsFiddle 上做了什么

最新更新