Как предотвратить ввод недопустимых символов в форму?

Например, если у меня есть форма, и я не хочу, чтобы пользователь вводил в нее числа, и я проверяю ее с помощью функции, содержащей регулярное выражение, как мне предотвратить недопустимый символ, введенный пользователем (в этом примере цифра ) от отображения в текстовой форме, если он не прошел тест регулярного выражения?

Это функция, которую я пробовал, и список выбора, в котором я ее пробовал (другими словами, это не вся программа). Я попытался вернуть false обработчику событий onkeypress, но то, что пользователь вводит в текстовое поле, все равно проходит.

function noNumbers(answer) {  //returns false and displays an alert if the answer contains numbers
     if (/[\d]+/.test(answer)) {    // if there are numbers
         window.alert("You can not enter numbers in this field");
         return false;
     }

}

<form action="get" enctype="application/x-www-form-urlencoded">
    <select id="questions" name="questions">
         <option value="no_numbers">What is the name of the city where you were born?</option>
         <option value="no_letters">What is your phone number?</option>
         <option value="no_numbers">What is the name of your favorite pet?</option>
         <option value="no_letters">What is your social security number?</option>
         <option value="no_numbers">What is your mother's maiden name?</option>  
    </select>
    <p><input type="text" name="answer" onkeypress="validateAnswer();" /></p>
</form>

javascript validation forms onkeypress
person user2228537    schedule 31.03.2013    source источник
comment
Эээ... как вы сказали, возвращая false в обработчике событий keypress. Что вы пробовали? Мы хотим увидеть код, который вы пробовали.   -  person thejh    schedule 31.03.2013
comment
Зачем это делать? Просто подтвердите его перед отправкой данных, раздражающие пользователей ограничениями на ввод просто раздражают.   -  person RobG    schedule 31.03.2013
comment
Это для школьного задания. Вот почему я не опубликовал код, когда впервые задал этот вопрос. Потому что люди в классе могут скопировать его и объявить своим. Но я думаю, мне нужно опубликовать код, чтобы люди увидели, что не так.   -  person user2228537    schedule 31.03.2013
comment
Вы не проверяете нажатую клавишу, вы проверяете ответ после того, как новый символ был добавлен в поле ввода. К тому времени уже слишком поздно, чтобы предотвратить это.   -  person Barmar    schedule 31.03.2013
comment
Как проверить нажатую клавишу? Насколько я понимаю, мне нужно что-то сделать с юникодом.   -  person user2228537    schedule 31.03.2013
comment
Обработчик получает аргумент event, а код ключа — event.charCode.   -  person Barmar    schedule 31.03.2013

Ответы (3)


arrow_upward
0
arrow_downward

Это функция, которую вы ищете

function validateAnswer(src) {
    var questions = document.getElementById("questions");
    var rule = questions.options[questions.selectedIndex].value;
    if(rule=="no_numbers") src.value = src.value.replace(/\d/g, '');
    if(rule=="no_letters") src.value = src.value.replace(/\w/g, '');
}

просто отправьте ссылку на поле ввода в функцию и вместо этого установите для нее событие onkeyup:

<input type="text" name="answer" onkeyup="validateAnswer(this);" />

вы также должны перехватить событие onchange поля выбора, чтобы сбросить значение поля ввода. Я предлагаю вам также рассмотреть HTML5 pattern attribute. Видеть

person Jan Turoň    schedule 31.03.2013
comment
Я не мог понять, как это сделать с возвратом false и Unicode (это то, что сказано в инструкциях к учебнику), но я сделал что-то вроде того, что вы описали здесь, и это работает. - person user2228537; 31.03.2013

arrow_upward
0
arrow_downward

Вы получаете нажатие клавиши из объекта события, переданного обработчику.

input type="text" name="answer" onkeypress="validateAnswer(this, event);" />

function validateAnswer(element, event) {
  if (event.charCode) {
    if (/\d/.test(String.fromCharCode(event.charCode))) {
      window.alert("You can not enter numbers in this field");
      return false;
    }
  }
}

Поиск в Google «события onkeypress» находит много примеров этого.

person Barmar    schedule 31.03.2013

arrow_upward
0
arrow_downward

Сделайте свою жизнь проще, добавив в функцию validateAnswer дополнительный параметр, например:
<input type="text" id="answer" name="answer" onkeyup="validateAnswer(this);" />

Затем вы можете определить свой validateAnswer следующим образом:

function validateAnswer(elem){
    elem.value = elem.value.replace(/[^\d]/g, '');
}

Вот пример: http://jsbin.com/iwiduq/1/

person hyde    schedule 31.03.2013
comment
Что делать, если я хочу заменить только все символы <>{}[]+? - person Si8; 23.01.2014