Текстовое поле с буквенно-цифровой проверкой в ​​javascript

Question

У меня есть текстовое поле, и он не должен позволять пользователю вводить какие-либо специальные символы. Он может войти:

1. A-Z
2. а-г
3. 0-9
4. Space.

Еще одно условие - первая буква должна быть буквенной. Как я могу выполнить проверку JavaScript на каждом нажатии клавиши?

Answer 1

Добавить onKeyUp = "javascript: checkChar (this);" в поле ввода.

function checkChar(tBox) { 

    var curVal = tBox.value; 

    if (/[^A-Za-z0-9 ]/.test(curVal)) { 

     //do something because he fails input test. 

    } 

} 

alernatively проверить только нажатую клавишу вы можете получить код клавиши от события так:

OnKeyUp = "JavaScript: checkChar (событие);"

function checkChar(e) { 

    var key; 


    if (e.keyCode) key = e.keyCode; 
    else if (e.which) key = e.which; 

    if (/[^A-Za-z0-9 ]/.test(String.fromCharCode(key))) { 

     //fails test 

    } 

} 

пропустил часть о первом символе, но вы можете сделать тест на значении текстового поля, как и в первом примере:

/^[A-Za-z]/.test(curVal) 

или даже использовать второй метод, но передать текстовое поле, а так что вы можете получить полную стоимость.

Answer 2

Вы должны проверить нажатую клавишу в обработчике события onkeydown текстового поля, и если он не соответствует условиям, то return false из обработчика. Использование keyup не позволит вам запретить ввод символов в текстовое поле.

Answer 3

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

Просто проверьте вход, когда он потеряет фокус, или при подаче.

Чтобы сделать это, вы можете использовать регулярное выражение и использовать этот шаблон:

`/[a-z]{1}[a-z0-9]/i` 

Вы также можете посмотреть на JQuery Validation Plugin

Answer 4

Эта функция проверяет строку, переданную ей для этих критериев :

function checkvalue(value) { 
    return value.match(/[A-Za-z][A-Za-z0-9 ]*/); 
} 

Затем вы можете использовать это в событии onkeypress, передавая текущее значение.

Answer 5

Теперь, когда у нас есть HTML5, вам даже не нужно использовать JavaScript. Вы можете использовать атрибут pattern.

<input type="text" pattern="[A-Za-z][A-Za-z0-9 ]*" title="Description of format" /> 

Атрибут pattern должен содержать regular expression определение формата. И title должен содержать удобное для человека описание формата.

После проверки, в зависимости от браузера браузер отобразит поле в красном и/или отобразит сообщение с описанием вашего формата.

В этом руководстве более подробно: HTML5 Input Validation Tutorial.