Проверка 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-restrict-keyboard-character-input.html

Answer 5

Я думаю, что проверка keypress событий не совсем адекватна, так как я считаю, что пользователи могут копировать / вставлять в поля ввода без нажатия клавиши.

Так что onblur, вероятно, несколько более надежно (но не так быстро).

Чтобы действительно убедиться, что символы, которые вам не нужны, не введены в поля ввода (или текстовые области и т. Д.), Я думаю, вам понадобится

1. отметьте keypress (если вы хотите получить немедленную обратную связь) и
2. также проверьте onblur,
3. , а также проверка входных данных на сервере (это единственный реальный способ убедиться, что ничего не попадает в ваши данные).

Примеры кода в других ответах будут хорошо работать для выполнения проверок на стороне клиента (только не полагайтесь только на проверку keypress событий), но, как было указано в принятом ответе действительно требуется проверка на стороне сервера.

Answer 6

Это поможет вам ... предположим, что у вас есть форма с формой "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);
    }
}

Answer 7

Некоторые из опций устарели на сегодняшний день. Так что следите за ними.

Если вы попробуете <input onkeypress="blockSpecialCharacters(event)" />, IDE типа WebStorm вырежет событие и скажет вам:

Используется устаревший символ, консультируется с документами для лучшей альтернативы

Затем, когда вы перейдете к 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>