Javascript验证：阻止特殊字符答案

【问题标题】：Javascript validation: Block special charactersJavascript验证：阻止特殊字符
【发布时间】：2009-05-25 10:30:58
【问题描述】：

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

有样品吗？

【问题讨论】：

标签： javascript validation

【解决方案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)"/>

【讨论】：

为什么要测试document.all 以确定对e.keyCode 的支持？为什么不改为测试e.keyCode？
技术上你不需要任何分组括号； && 优先于 ||。
这行得通，但是如果我们想允许用户输入怎么办。和，

【解决方案2】：

你有两种方法：

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

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

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

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

【讨论】：

限制输入不一定是限制性的，它可能是输入电话号码、邮政编码、日期等。但是 +1 建议在服务器端加倍检查！

【解决方案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;
    }
}

【讨论】：

【解决方案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);
    }
}

【讨论】：

【解决方案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

【讨论】：

【解决方案6】：

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

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

要真正确保您不想要的字符不会输入到输入框（或文本区域等）中，我认为您需要

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

其他答案中的代码示例可以很好地进行客户端检查（只是不要依赖 only 检查keypress 事件），但正如在接受中指出的那样回答，确实需要服务器端检查。

【讨论】：

【解决方案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>

【讨论】：