jQuery蒙面输入 - 是否可以检索蒙版?

时间:2014-02-26 20:29:09

标签: javascript jquery jquery-validate maskedinput data-masking

我正在jQuery Masked Input Plugin使用jQuery Validation Plugin。当表单的一个字段失去焦点时,jQuery Validation Plugin会显示一条消息,但是绑定到掩码的字段不会发生这种情况,可能是因为模糊事件发生并验证字段不为空,实际上字段已填写戴着面具。

所以我覆盖了验证插件的required method,以便验证掩码。由于我有电话掩码,我不能硬编码掩码,我必须在插件中调用一个方法,返回绑定到字段的掩码。我没有找到蒙面输入插件的文档,也没有找到我的问题。

有没有人知道是否有一种方法可以让我将面具本身绑定到该字段?

2 个答案:

答案 0 :(得分:1)

我为手机字段使用屏蔽输入,并验证minlength是否存在电话号码,如下所示:

...

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

我的面具看起来像这样:

+1(XXX)XXX-XXXX

答案 1 :(得分:0)

考虑到插件(jQuery Masked Input Plugin)的构建方式,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);

现在使用mask2

而不是使用掩码
$("#date").mask2("99/99/9999");

添加自定义验证方法

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

jQuery.validator.addMethod("maskRule", function(value, element, params) {

  return value.length == element.data("data-maskLength");
}

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

你可以看到我在JsFiddle

上做了什么