Валидация e-mail на лету с использованием jQuery

От автора: в этом уроке мы вновь коснемся такой темы, как юзабилити, которую мы уже затрагивали в ряде предыдущих уроков. Сейчас мы реализуем такую вещь, как проверка электронного адреса, который ввел пользователь (email), «на лету», т.е. без отправки данных на сервер, а непосредственно на стороне клиента. Это будет не только удобно, но еще и придаст странице большей эффектности. Кроме того, таким образом, снимается лишняя нагрузка на сайт — ведь не посылаются лишние запросы на сервер.

Реализовывать поставленную задачу мы будем при помощи 2-х средств:

Языка регулярных выражений, при помощи которого мы как раз и будем проверять то, что вводит пользователь на соответствие шаблону e-mail;

Фреймворка jQuery, который и будет показывать «на лету» результат проверки (валидации) электронного адреса.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Шаг 1. Формирование задач.

Собственно, такую штуку, я думаю, Вы уже не раз видели на всевозможных сайтах. Есть поле для ввода e-mail, когда Вы вводите адрес почты в это поле и затем переходите к другому полю, рядом с полем e-mail выводится сообщение в каком-либо виде о том, что такой e-mail подходит или не подходит. Иногда такое сообщение появляется совсем уж «на лету», т.е, как только Вы начинаете вводить символы с клавиатуры — эти символы сразу же начинают проверяться на соответствие шаблону. Я покажу, как реализовывается оба варианта, а какой выбрать — решать уж Вам. Итак, приступим.

Прежде всего, создадим обычную страницу HTML с несколькими правилами стилей и небольшой формой:

Давайте немного разберем структуру документа. Прежде всего, мы имеем 2 правила CSS:

Класс "ok" будет использован для выделения поля в том случае, когда нас устраивает введенный пользователем e-mail — поле будет обведено зеленой рамкой толщиной в 1 пиксель. Класс "error" будет использован для выделения поля в том случае, когда нас не устраивает содержимое поля e-mail — поле будет обведено красной рамкой толщиной в 1 пиксель.

В форме есть собственно поле для ввода e-mail, блок span с идентификатором "valid", в который будет выводиться сообщение с результатами валидации и также имеется кнопка, которую мы сделаем изначально неактивной и будем активировать только в том случае, если введенный e-mail нас устраивает. Для того, чтобы деактивировать кнопку — добавим ей атрибут "disabled":

Шаг 2. Составляем регулярное выражение.

Теперь немного поговорим о валидации поля e-mail, т.е., проверке того, что нам прислал пользователь, на соответствие с неким шаблоном. Любой почтовый адрес имеет некий формат… к примеру, такой — «name@mail.ru». Т.е., здесь присутствуют 3 части, разделенные между собой знаком собаки — «@» — и точкой — «.». Вот этот вот образец и будет нашим шаблоном, на соответствие с которым мы будем проверять то, что получим от пользователя в качестве почтового адреса. Если полученное будет соответствовать шаблону — пропускаем такой e-mail, если нет, то — нет. Проверить на 100% свой ли e-mail ввел пользователь при помощи шаблона мы, конечно же, не сможем — это не возможно в принципе, поскольку пользователь может ввести строку внешне похожую на формат электронного адреса, например тот же name@mail.ru. Формат соответствует шаблону, но это совсем не значит, что такая почта существует или, если существует, зарегистрирована на пользователя, заполняющего в данный момент форму. Поэтому 100% проверкой является только отправка на введенный e-mail письма с ссылкой для подтверждения введенного почтового адреса. Но для предотвращения случая, когда в поле e-mail вводится просто набор символов, нам понадобится именно сравнение введенного с шаблоном.

Для того чтобы проверить соответствие чего-то с установленным шаблоном, используются регулярные выражения. В принципе, задача регулярных выражений состоит в том, чтобы находить (или не находить) совпадения строки или ее части с установленным шаблоном. Регулярные выражения — это, скажем так, мини-язык, который используется во многих языках программирования (JavaScript, PHP, Perl и др). Если Вы заинтересуетесь регулярными выражениями, то в сети можно найти довольно много статей о них. Если же это не так интересно будет Вам, то также можно найти в сети уже готовые регулярные выражения под конкретные нужды. Я Вам для этих целей могу порекомендовать сайт с уже готовыми регулярками для валидации e-mail, даты, времени, URL и другого (//regexlib.com/DisplayPatterns.aspx). В дополнительных материалах Вы также найдете своеобразную шпаргалку по регулярным выражениям.

Регулярные выражения — это очень мощное средство проверок, но желательно их использовать только там, где без них действительно не обойтись.

Итак, используя шпаргалку из дополнительных материалов, составим наш шаблон (регулярное выражение). В уже открытой конструкции JavaScript пропишем стандартный код jQuery, который «скажет», что весь код, заключенный в нем, будет выполняться после загрузки документа (рекомендую Вам ознакомиться с моими предыдущими уроками, в которых затрагивалась тема работы с фреймворком jQuery, и в которых я рассказывал об основах работы с ним):