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>