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

Posted 2023-05-09

【中文标题】用于防止输入任何不匹配正则表达式的输入的 jquery 插件

【英文标题】：jquery plugin for preventing entering any input not matching a regexp

【发布时间】：2010-09-30 08:14:03

【问题描述】：

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

谢谢

【参考方案1】：

Masked Input Plugin

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

【讨论】：

它不会有帮助，因为，被屏蔽的输入会创建一个掩码，它控制格式，但对于与正则表达式匹配并不真正有用

如果您想禁用在文本框中输入某些字符的功能，那么掩码是您的最佳选择。您需要正则表达式的规则有多复杂？

Bob 是对的，请参阅我的回答，了解如果您坚持使用正则表达式，事情会变得多么复杂。您也可以合并 meouw 的答案，以便在 keydown 事件到达文本框之前更好地处理它们，但这会使事情变得更加复杂。屏蔽输入可能是最好的。

如果小数部分是可选的呢？例如，我想粘贴 12345。为什么我必须得到 123.45，这是完全错误的。当且仅当我粘贴 123.45 时，我才想获得 123.45。我认为digitalbush.com/projects/masked-input-plugin 使用? 字符处理这种情况，但它还有其他问题。

【参考方案2】：

jquery-keyfilter plugin - 做需要做的事。

【参考方案3】：

我不认为有任何这样的插件现成可用。这个问题有点棘手，因为您必须允许用户在应用您的正则表达式之前输入一些输入。也就是说，您不能只匹配输入的每个字符，除非您的正则表达式仅定义一组字符。

举例来说，如果他们正在输入付款金额，并且您希望在单个字符的基础上允许数字和小数，那么是什么阻止他们输入 99.99.23.42492？

另一方面，如果您提供像/\d+\.\d2/ 这样的完整正则表达式，那么它根本不会匹配单个字符，您必须允许他们在尝试应用之前输入一定数量的字符正则表达式并在不匹配时清除他们的输入。这可能会令人沮丧。

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

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

   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】：

键盘事件有点棘手，正如 jQuery 文档中所建议的那样。http://unixpapa.com/js/key.htmlhttp://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();
);

【参考方案5】：

这是我使用的一个简单的 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();