仅接受在JavaScript中不起作用的数字和字母代码

Question

我试图阻止用户输入除数字和字母以外的任何内容，但是我的代码甚至不允许它们本身输入。 可能是什么原因？ 这是我的代码段：

$(document).ready(function(){
    $("#txtuname").keypress(function(e){ 
        var validExp = /^[0-9a-z]+$/gi;
        var val = $(this).val();
        if(val.match(validExp))
        {
            $("#errmsg").html("");
            return true;
        }
        else
        {
            $("#errmsg").html("Number and letters Only"); 
            return false;
        }
    });
});


<input type="text" name="txtuname" id="txtuname" />
<span id="errmsg"></span>

JSFiddle

Answer 1

您可以使用keyup而不是keypress

 $(document).ready(function(){ $("#txtuname").keyup(function(e){ var validExp = /^[0-9a-z]+$/gi; var val = $(this).val(); if(val.match(validExp)) { $("#errmsg").html(""); return true; } else { $("#errmsg").html("Number and letters Only"); return false; } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <input type="text" name="txtuname" id="txtuname" /> <span id="errmsg"></span> 

Answer 2

您可以用input事件代替keypress事件。 将RegExp调整为/[0-9a-z]/i ，将.split()与参数"" ， Array.prototype.every()和RegExp.prototype.test()以检查条件if为输入值的每个字符； 如果每个字符是数字或字母的条件是true ，否则false替换的无效字符value使用.replace()与RegExp /[^0-9a-z]/ig

 $(document).ready(function() { var validExp = /[0-9a-z]/i; $("#txtuname").on("input", function(e) { var val = this.value; var check = val.split("").every(function(value) { return validExp.test(value) }); if (check) { $("#errmsg").html(""); return check; } else { this.value = val.replace(/[^0-9a-z]/ig, ""); $("#errmsg").html("Number and letters Only"); return false; } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <input type="text" name="txtuname" id="txtuname" /> <span id="errmsg"></span> 

Answer 3

$(document).ready(function () {

        $("#txtuname").keypress(function (e) {

            var validExp = /^[0-9a-z]+$/gi;

            if (validExp.test(e.key)) {
                $("#errmsg").html("");
                return true;
            }
            else {
                $("#errmsg").html("Number and letters Only");

                return false;
            }
        });
    });

Answer 4

这是因为在将新字符添加到元素的值之前触发了keypress事件（因此，在添加第一个字符之前，将触发第一个keypress事件，而该值仍为空）。 您应该改用keyup，它是在添加角色reference后触发的。

下面是代码

html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 

<input type="text" name="txtuname" id="txtuname" />
<span id="errmsg"></span>

js

$(document).ready(function(){
    $("#txtuname").keyup(function(e){ 
        var validExp = /^[0-9a-z]+$/gi;
        var val = $(this).val();
        if(val.match(validExp))
        {
            $("#errmsg").html("");
            return true;
        }
        else
        {
            $("#errmsg").html("Number and letters Only"); 
            return false;
        }
    });
});

Answer 5

您的问题是您没有获得所按下键的值。 如果像这样设置val变量，它将按预期工作。

var val = String.fromCharCode(e.keyCode)

这将获得按下键的ASCII码，然后转换为它代表的字母或数字。 然后，您可以检查您的正则表达式。

Answer 6

 $(document).ready(function(){ $("#txtuname").keyup(function(e){ var validExp = /^[0-9a-z]+$/gi; var val = $(this).val(); if(validExp.test(val)) { $("#errmsg").html(""); return true; } else { // fix the value of input field here $(this).val(""); $("#errmsg").html("Number and letters Only"); return false; } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" name="txtuname" id="txtuname" /> <span id="errmsg"></span> 

1. 如果要使用此给定的技术，则需要使用keyup，以便字符已经“添加”到该值。

2. 由于String.prototype.match实际上返回匹配项的数组，因此它无法以您希望的方式工作。 更不用说它比RegEx.prototype.test昂贵得多。

奖金

您可以使用在文本输入字段中的获取光标位置（以字符为单位）中显示的输入字段中查找carret位置的技术

实际将输入字段固定在键盘上。