Валидация формы с помощью js.

Количество просмотров: 514

Мы уже писали про валидацию формы с помощью html5, теперь пришло время узнать как проверить поле с помощью js. Нам потребуется:

  • Простая html форма
  • Браузер
  • Функция обработчик
  • Библиотека jQuery,актуальную версию можно взять на оф сайте.

Код простой формы на которой будем ставить опыты с нашим скриптом валидации.


<form action="">
<p>Имя</p> 
<input name="name" class="name"><br><br>
<p>Email</p> 
<input name="email" class="email"><br>
<input value="Отправить" type="submit">
</form

Скрипт обрабатывающий значение в теге инпут по при вводе в него данных.


function validName() { 
    var shab = /[^A-Za-zА-Яа-пр-яЁё\s]/; //шаблон для сравнения 
    var value = this.value; // значение из input
    if (shab.test(value)) { 
        value = value.replace(shab, ''); //заменяем на пустоту, то что не подходит
        this.value = value; // возвращаем очищенное значение в input
    } 
} 

$(".name").on("keyup", validName); // вещаем событие на нажатие клавишы

Как видно функция довольно простая, как только сработает событие ввода в инпут, введенная информация обработается функцией и заменится. Для валидации email достаточно изменить шаблон на следующий var shab = /[^A-Za-z0-9\.\-_@]/; и готово.

Вроде бы все, самая простая валидация готова, при использовании не забывайте, что js можно отключить и ввести в поле формы любые данные, например валидация описанная в этой статье обходится с помощью вставки данных с помощью мышки. Не забывайте проверять данные в своих формах всеми возможными способами. Удачи!


comments powered by HyperComments

© 2015-2018 Goodweb.me --- Карта сайта --- info@goodweb.me

Наверх