JavaScript验证：阻止特殊字符

Question

我该如何限制用户在文本框中输入特殊字符？我只想允许输入数字和字母（打字/粘贴）。

有示例吗？

- Shyju

Answer 1

尝试使用这个函数，它允许字母数字和空格：

function alpha(e) {
    var k;
    document.all ? k = e.keyCode : k = e.which;
    return ((k > 64 && k < 91) || (k > 96 && k < 123) || k == 8 || k == 32 || (k >= 48 && k <= 57));
}

在你的HTML中：

<input type="text" name="name"  onkeypress="return alpha(event)"/>

- qbtrance.com

---

你为什么要测试 document.all 来确定对 e.keyCode 的支持？为什么不直接测试 e.keyCode 呢？ - rvighne

从技术上讲，您不需要任何分组括号；&&优先于||。 - rvighne

这个程序可以工作，但如果我们想允许用户输入"."和","会怎样呢？ - beNiceWeAlLearning

这个程序相关的内容翻译成中文：这允许空格（k == 32）--> 我认为这是我理解中需要排除的“特殊字符”之一。 - tuffo19

Answer 2

您有两种方法可以实现这个：

1. 检查“keypress”事件。如果用户按下特殊字符键，则立即停止输入
2. 检查“onblur”事件：当输入元素失去焦点时，验证其内容。如果值无效，则在该输入框旁边显示一个低调的警告。

我建议使用第二种方法，因为它更少令人烦恼。请记得同时检查onpaste。如果只使用keypress，那么我们可以复制和粘贴特殊字符，因此还需使用onpaste来限制粘贴特殊字符。

另外，我还建议您重新考虑是否真的想防止用户输入特殊字符。因为许多人在他们的密码中使用$、#、@和*等特殊字符。

我猜这可能是为了防止SQL注入；如果是这样的话：最好在服务器端处理检查。或者更好的办法是转义值并将其存储在数据库中。

- jrharshath

---

限制输入并不一定是限制性的，可能是为了输入电话号码、邮政编码、日期等等。但是建议在服务器端进行双重检查！ - PhiLho

Answer 3

对于特殊字符：

var iChars = "!@#$%^&*()+=-[]\\\';,./{}|\":<>?";

for (var i = 0; i < document.formname.fieldname.value.length; i++) {
    if (iChars.indexOf(document.formname.fieldname.value.charAt(i)) != -1) {
        alert ("Your username has special characters. \nThese are not allowed.\n Please remove them and try again.");
        return false;
    }
}

- dLcreations

Answer 4

如果你有一个名称为 "formname" 的表单和一个名称为 "txt" 的文本框，以下代码可以帮助你只允许输入字母或数字：

var checkString = document.formname.txt.value;
if (checkString != "") {
    if ( /[^A-Za-z\d]/.test(checkString)) {
        alert("Please enter only letter and numeric characters");
        document.formname.txt.focus();
        return (false);
    }
}

- Sourabh

Answer 5

简单来说，只需要使用一个适当的 onkeypress 处理程序即可。请参见http://www.qodo.co.uk/blog/javascript-restrict-keyboard-character-input/和示例http://www.qodo.co.uk/wp-content/uploads/2008/05/javascript-restrict-keyboard-character-input.html

- Matthew Flaschen

Answer 6

我认为仅检查 keypress 事件并不完全可靠，因为我相信用户可以在不触发键盘按键的情况下将文本 复制/粘贴 到输入框中。

所以，onblur 更加可靠（但不是立即反馈）。

如果真正想确保不希望输入的字符不会进入输入框（或文本区域等），我认为您需要：

1. 检查 keypress（如果要提供立即反馈），并且
2. 还要检查 onblur，
3. 以及在服务器上验证输入（这是确保无法包含不需要的内容的唯一真正方法）。

其他答案中的代码示例对于执行客户端检查非常有效（只是不能仅依赖于检查 keypress 事件），但是，就像被接受的答案中指出的那样，确实需要进行服务器端检查。

- user2771097

Answer 7

一些选项已经被弃用了，要注意这一点。

如果你尝试使用 <input onkeypress="blockSpecialCharacters(event)" />，像 WebStorm 这样的 IDE 将会划掉 event 并提示你：

使用了已弃用的符号，请参考文档以获得更好的替代方案

然后当你到了 JavaScript 部分，console.log(e.keyCode) 也会给出 keyCode 并提示：

使用了已弃用的符号，请参考文档以获得更好的替代方案

无论如何，我是用 jQuery 做的。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>

<input id="theInput" />

<script>
    function blockSpecialCharacters(e) {
            let key = e.key;
            let keyCharCode = key.charCodeAt(0);

            // 0-9
            if(keyCharCode >= 48 && keyCharCode <= 57) {
                return key;
            }
            // A-Z
            if(keyCharCode >= 65 && keyCharCode <= 90) {
                return key;
            }
            // a-z
            if(keyCharCode >= 97 && keyCharCode <= 122) {
                return key;
            }

            return false;
    }

    $('#theInput').keypress(function(e) {
        blockSpecialCharacters(e);
    });
</script>

- Ricky Dam