9

我从以前的开发人员那里收到了 PHP/JS 代码，我需要在手机号码字段中添加号码验证。我已经有了 HTML 验证，但我需要补充一点，如果有人按下了无效的键，它不会被显示，只是为了稍后以红色突出显示该字段，因为它包含无效的输入。

我见过许多正则表达式的使用并尝试过，但它们对我需要的有一个非此即彼的效果：如果输入了字母或特殊字符，则不接受也不显示，所有其他输入（数字、键）被接受（我需要根本不显示无效字符，不显示然后擦除）。现在最有效的正则表达式是这样的：

function filterNonDigits(evt)
{
  var event = evt || window.event;
  var keyentered = event.keyCode || event.which;
  keyentered = String.fromCharCode(keyentered);

  //var regex1 = /[0-9]|\./;
  var regex2 = /^[a-zA-Z.,;:|\\\/~!@#$%^&*_-{}\[\]()`"'<>?\s]+$/;

  if( regex2.test(keyentered) ) {
    event.returnValue = false;
    if(event.preventDefault) event.preventDefault();
  }

当我使用注释的 regex1（IF 条件反转）时，它自然将输入限制为仅数字，从而阻止了所有键，例如 Delete、BackSpace 等。使用 regex2 时，我仍然无法按 Delete 或数字键盘中的数字.

所以我的问题是，上面的代码是否可以修改为只接受数字但也允许键？另一个重要的一点是，我需要一种不对这些键使用键码（8、24 等）的方法，以确保可以使用所有键盘类型。

新更新：

所以我的解决方案如下：如果“oninput”属性存在，我使用 Ehtesham 提供的解决方案，如果不存在，则备份使用 Rohan Kumar 提供的解决方案。所以它是这样的：

if (obj.hasOwnProperty('oninput') || ('oninput' in obj)) 
{
    $('#mobileno').on('input', function (event) { 
        this.value = this.value.replace(/[^0-9]/g, '');
    });
} 
else 
{
    $('#mobileno').on('keypress',function(e){
        var deleteCode = 8;  var backspaceCode = 46;
        var key = e.which;
        if ((key>=48 && key<=57) || key === deleteCode || key === backspaceCode || (key>=37 &&  key<=40) || key===0)    
        {    
            character = String.fromCharCode(key);
            if( character != '.' && character != '%' && character != '&' && character != '(' && character != '\'' ) 
            { 
                return true; 
            }
            else { return false; }
         }
         else   { return false; }
    });
}

谢谢。

4

6 回答 6

35

这里最好的方法是使用input事件来处理你所有的问题。所有现代浏览器都支持它。使用 jQuery，您可以执行以下操作。处理使用鼠标/键盘退格等粘贴值的所有情况。

$('.numeric').on('input', function (event) { 
    this.value = this.value.replace(/[^0-9]/g, '');
});

看这里

您可以input通过检查输入是否具有此属性来检查是否支持事件，如果没有，您可以将onkeyup其用于旧版浏览器。

if (inputElement.hasOwnProperty('oninput')) {
    // bind input
} else {
    // bind onkeyup
}
于 2013-10-01T08:45:38.877 回答
9

上一篇文章中描述了一个不错的解决方案：

jQuery('.numbersOnly').keyup(function () { 
    this.value = this.value.replace(/[^0-9\.]/g,'');
});
于 2013-09-30T11:53:53.743 回答
3

试试看，

CSS

.error{border:1px solid #F00;}

脚本

$('#key').on('keydown',function(e){
    var deleteKeyCode = 8;
    var backspaceKeyCode = 46;
    if ((e.which>=48 && e.which<=57) ||
         (e.which>=96 && e.which<=105)  || // for num pad numeric keys
         e.which === deleteKeyCode || // for delete key,
             e.which === backspaceKeyCode) // for backspace
         // you can add code for left,right arrow keys
    {
        $(this).removeClass('error');
        return true;
    }
    else
    {
        $(this).addClass('error');
        return false;
    }
});

小提琴：http: //jsfiddle.net/PueS2/

于 2013-09-30T11:50:08.400 回答
2

与其检查事件 keyCode，不如只检查实际输入中的变化，然后过滤掉非数字？

此示例使用 keyup 以便它可以读取实际输入的内容，这意味着该字符会短暂显示然后删除，但希望您能理解我的要点。它甚至可能会向用户反馈不允许使用该字符。无论哪种方式，我认为这是最简单的设置，如果您需要更多帮助来充实这一点，请告诉我。

function filterNonDigits(evt)
{
  var event = evt || window.event;
  var val = event.target.value;
  var filtered = val.replace(/[^0-9]/g, '');

    if(filtered !== val) {
      event.target.value = filtered;
      event.target.className += " error";
    }
}

http://jsfiddle.net/mEvSV/1/

（jquery 仅用于轻松绑定 keyup 函数，您的实际脚本不需要它）

于 2013-09-30T11:52:51.157 回答
0

/\d/相当于上面的描述/[0-9]/。来源：https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#special-digit

于 2019-03-21T22:02:43.077 回答
0

这个比较简洁。。。

this.value = this.value.replace(/\D/gm, '');
于 2020-03-03T21:16:52.607 回答