如何防止javascript中的非字母数字输入？答案

【问题标题】：How to prevent non-alphanumeric input in javascript?如何防止javascript中的非字母数字输入？
【发布时间】：2012-12-29 11:03:22
【问题描述】：

$("#user").keyup(function(e){ 
    var regx = /^[A-Za-z0-9]+$/;
    if (!regx.test('#user')) 
    {$("#infoUser").html("Alphanumeric only allowed !");}
);}

#user 是文本输入，如果用户输入除字母和数字以外的任何内容，我想显示警告。
在上述情况下，无论输入什么，都会出现警告。

【问题讨论】：

与例如texotela.co.uk/code/jquery/numeric
您正在测试字符串#user 本身的正则表达式，而不是ID 为user 的元素的内容/值。 !regx.test($(e).val()) 应该适合您的需求。
不是答案，只是提醒：如果您将值提交到数据库中，请不要依赖于此。 Javascript 很容易被禁用。
@andy，谢谢。我在 php 方面有类似的检查。我只想在提交之前显示这个警告。

标签： javascript jquery regex

【解决方案1】：

改变：

if (!regx.test('#user'))

到

if (!regx.test( $(this).val() ) )

做：

$("#user").keyup(function(e){     
    var str = $.trim( $(this).val() );
    if( str != "" ) {
      var regx = /^[A-Za-z0-9]+$/;
      if (!regx.test(str)) {
        $("#infoUser").html("Alphanumeric only allowed !");
      }
    }
    else {
       //empty value -- do something here
    }
});

JS Fiddle 示例

【讨论】：

感谢每个人。有用。但是，如果输入为空 - 也会显示警告！

【解决方案2】：

这条线

regx.test('#user')

您是否测试了字符串#user，这是一个包含错误字符的字符串（#）。所以它总是说不允许。

通过$(this).val() 使用$("#user") 的实际值

【讨论】：

【解决方案3】：

您必须使用 #user 元素值而不是 '#user' 字符串进行测试

$("#user").keyup(function(e){ 
    var regx = /^[A-Za-z0-9]+$/;
    if (!regx.test($('#user').val()))  // .
    {$("#infoUser").html("Alphanumeric only allowed !");}
);}

【讨论】：

【解决方案4】：

   function isNotAlphanumeric(){
        return (! val.match(/^[a-zA-Z]+$/))
        //return val.match(/^[a-zA-Z0-9]+$/) ? false : true;
   }

所以如果 val 是字母数字，则返回 false。所以根据返回值采取适当的行动。您可以在按键事件中调用此方法。

【讨论】：

return (! val.match(/^[a-zA-Z]+$/)) 会更干净一些

【解决方案5】：

$('#alpha').bind('keypress', function (event) {
var regex = new RegExp("^[a-zA-Z\b]+$");
var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
if (!regex.test(key)) {
   event.preventDefault();
   return false;
}
});

$('#numeric').bind('keypress', function (event) {
var regex = new RegExp("^[0-9\b]+$");
var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
if (!regex.test(key)) {
   event.preventDefault();
   return false;
}
});

$('#alphanumeric').bind('keypress', function (event) {
var regex = new RegExp("^[a-zA-Z0-9\b]+$");
var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
if (!regex.test(key)) {
   event.preventDefault();
   return false;
}
});


$('#alphanumericspecial').bind('keypress', function (event) {
var regex = new RegExp("^[a-zA-Z0-9 .]+$");
var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
if (!regex.test(key)) {
   event.preventDefault();
   return false;
}
});

【讨论】：

一个简短的总结可以帮助审阅者（比如我）判断你的答案的有效性；感兴趣的用户不必深入研究代码即可理解您的方法。一两句话就可以了，不用做太多的工作。