jquery插件,用于防止输入任何与正则表达式不匹配的输入

时间:2009-01-08 19:15:48

标签: javascript jquery jquery-plugins

jquery是否有任何插件可以阻止输入任何与正则表达式模式不匹配的文本框的输入。例如,我有一个文本框用于输入付款金额,我希望用户只能输入数字和。在文本框中,所有其他输入都不会对文本框产生任何影响..

感谢

5 个答案:

答案 0 :(得分:6)

Masked Input Plugin

jQuery(function($){   
    $("#paymentAmount").mask("9999.99");
});

答案 1 :(得分:5)

jquery-keyfilter plugin - 做了所需的事。

答案 2 :(得分:1)

按照jQuery文档的建议,键盘事件有点棘手 http://unixpapa.com/js/key.html
http://yehudakatz.com/2007/07/03/event-normalization-in-jquery-113/

与您有关的困难是:

识别钥匙
当您捕获键盘事件时,您可能希望知道按下了哪个键。如果是这样,你可能会问得太多。这是一个非常混乱的浏览器不兼容和错误 从上面的第一个链接

同样,在jQuery中我会这样做:

textBoxElement.keydown( function( e ) {
    var chr = String.fromCharCode( e.which );
    if( !/[0-9.]/.test( chr ) ) {
        e.preventDefault();
    }
}

这也会禁用其他重要的键,如enter,tab,delete,因此需要将它们添加到条件中。并非所有其他键都是可打印的,因此无法正则表达式,因此您必须检查其e.keyCode。 13,8等。

如果您对正则表达式不太感兴趣,可以执行类似

的操作
textBoxElement.keydown( function( e ) {
    switch( e.keyCode ) {
        case 48: //0
        case 49: //1
        case 50: //2
        case 51: //3
        case 52: //4
        case 53: //5
        case 54: //6
        case 55: //7
        case 56: //8
        case 57: //9
        case 48: //10
        case 37: //left
        case 39: //right
        case 8:  //tab
        case 13: //return
        case 46: //del
        case 190: //.
            return;
    }
    e.preventDefault();
});

答案 3 :(得分:1)

我认为没有任何此类插件随时可用。问题有点棘手,因为您必须允许用户在应用正则表达式之前键入一些输入。也就是说,除非你的正则表达式只是定义了一组字符,否则你不能只是在键入时匹配每个字符。

为了说明,如果他们输入了付款金额,并且您希望在单个字符的基础上允许数字和小数,那么是什么阻止他们输入99.99.23.42492

另一方面,如果你提供一个完整的正则表达式,如/\d+\.\d{2}/,那么它在单个字符上根本不匹配,你必须允许它们在尝试之前输入一些字符数应用正则表达式并擦除它们的输入,如果它不匹配。这可能令人沮丧。

如果你真的想在键入时过滤输入,那么你想允许第一个字符的数字,然后是数字或小数,后续字符直到输入小数,然后再输入两个数字,然后不更多输入。它不是通用过滤器。

例如,这里有一些代码可以做到这一点,但它非常难看。

   myInput.keydown(function() {
       var text = this.val
       if(!/^\d/.test(text)) {
          return '';
       } else {
          done = text.match(/^(\d+\.\d\d)/);
          if (done) { return done[0]; }

          last_char = text.substr(text.length-1,1);
          decimal_count = text.replace(/[^\.]/g,'').length;

          if (decimal_count < 1) {
             if (!/[\d\.]/.test(last_char)) {
                return text.substr(0,text.length-1);
             }
          } else if (decimal_count == 1 && last_char == '.') {
             return text;
          } else {
             if (!/[\d]/.test(last_char)) {
                return text.substr(0,text.length-1);
             }
          }
          return text;
       }
    });

当然,如果他们碰巧粘贴某些值而没有进行“真正的”打字,这将无效。

也许其他一些方法对你更有效?就像突出显示该字段并向用户指示他们输入的是非数字,非小数,还是输入多个小数,而不是过滤输入本身,因为这看起来很混乱。

答案 4 :(得分:0)

这是我使用的一个简单的jquery扩展:

jQuery.fn.DecimalMask = function () {
  return this.each(function () {
    $(this).keypress(function (e) {
      var keynum;
      if (window.event) // IE
      {
        keynum = e.keyCode;
      }
      else if (e.which) // Netscape/Firefox/Opera
      {
        keynum = e.which;
      }
      if (typeof keynum == 'undefined') return true;
      else if (keynum == 46 && $(this).val().indexOf(".") > -1) return false; //already has a decimal point
      else return ((keynum > 47 && keynum < 58) || keynum == 13 || keynum == 8 || keynum == 9 || keynum == 46 || keynum == 45); //allow ony number keys or keypad number keys
    });
  });
};
//implementation
$("#mytxtbox").DecimalMask();