Javascript验证：阻止特殊字符

Question

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

有样品吗？

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)"/>

Answer 2

你有两种方法：

1. 检查“按键”事件。 如果用户按下特殊字符键，请将其停在那里
2. 检查“onblur”事件：当输入元素失去焦点时，验证其内容。 如果该值无效，则在该输入框旁边显示一条谨慎的警告。

我会建议第二种方法，因为它不那么刺激。 记得也检查onpaste 。 如果你只使用按键那么我们可以复制并粘贴特殊字符，所以使用onpaste也可以限制粘贴特殊字符

此外，我还建议您重新考虑是否确实要阻止用户输入特殊字符。 因为很多人的密码都有$，＃，@和*。

我认为这可能是为了防止SQL注入; 如果是这样：你处理服务器端的检查更好。 或者更好的是，转义值并将它们存储在数据库中。

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;
    }
}

Answer 4

基本上，只需使用适当的onkeypress处理程序。 请参阅http://www.qodo.co.uk/blog/javascript-restrict-keyboard-character-input/和示例http://www.qodo.co.uk/wp-content/uploads/2008/05/ JavaScript的限制，键盘字符input.html

Answer 5

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

所以onblur可能更可靠（但不那么直接）。

为了真正确保你不想要的字符没有输入输入框（或textareas等），我想你需要

1. 检查keypress （如果你想立即提供反馈）和
2. 还检查onblur ，
3. 以及验证服务器上的输入（这是确保没有任何不需要的东西进入您的数据的唯一真正方法）。

在其他答案的代码示例将正常工作做客户端检查（不要只依靠检查keypress事件），但作为公认的答案指出，确实需要一个服务器端的检查。

Answer 6

它会帮助你......假设你有一个带有“formname”形式的表单和一个带有“txt”名称的文本框。 然后您可以使用以下代码仅允许使用aphanumeric值

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);
    }
}

Answer 7

截至今天，一些选项已被弃用。 所以要小心那些。

如果您尝试<input onkeypress="blockSpecialCharacters(event)" /> ，像WebStorm这样的IDE会削减事件并告诉您：

使用弃用的符号，咨询文档以获得更好的替代方案

然后当你到达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>