От автора: в этом уроке мы вновь коснемся такой темы, как юзабилити, которую мы уже затрагивали в ряде предыдущих уроков. Сейчас мы реализуем такую вещь, как проверка электронного адреса, который ввел пользователь (email), «на лету», т.е. без отправки данных на сервер, а непосредственно на стороне клиента. Это будет не только удобно, но еще и придаст странице большей эффектности. Кроме того, таким образом, снимается лишняя нагрузка на сайт — ведь не посылаются лишние запросы на сервер.
Реализовывать поставленную задачу мы будем при помощи 2-х средств:
Языка регулярных выражений, при помощи которого мы как раз и будем проверять то, что вводит пользователь на соответствие шаблону e-mail;
Фреймворка jQuery, который и будет показывать «на лету» результат проверки (валидации) электронного адреса.
Шаг 1. Формирование задач.
Собственно, такую штуку, я думаю, Вы уже не раз видели на всевозможных сайтах. Есть поле для ввода e-mail, когда Вы вводите адрес почты в это поле и затем переходите к другому полю, рядом с полем e-mail выводится сообщение в каком-либо виде о том, что такой e-mail подходит или не подходит. Иногда такое сообщение появляется совсем уж «на лету», т.е, как только Вы начинаете вводить символы с клавиатуры — эти символы сразу же начинают проверяться на соответствие шаблону. Я покажу, как реализовывается оба варианта, а какой выбрать — решать уж Вам. Итак, приступим.
Прежде всего, создадим обычную страницу HTML с несколькими правилами стилей и небольшой формой:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html xmlns="//www.w3.org/1999/xhtml"> <head> <style type="text/css"> .ok{ border: 1px solid green; } .error{ border: 1px solid red; } </style> <title>Валидация поля E-mail</title> </head> <body> <form> <p>E-mail: <input type="text" name="mail" id="mail" /> <span id="valid"></span></p> <p><input type="submit" name="submit" id="submit" value="Отправить" /></p> </form> </body> </html> |
Давайте немного разберем структуру документа. Прежде всего, мы имеем 2 правила CSS:
|
1 2 3 4 5 6 7 8 |
<style type="text/css"> .ok{ border: 1px solid green; } .error{ border: 1px solid red; } </style> |
Класс "ok" будет использован для выделения поля в том случае, когда нас устраивает введенный пользователем e-mail — поле будет обведено зеленой рамкой толщиной в 1 пиксель. Класс "error" будет использован для выделения поля в том случае, когда нас не устраивает содержимое поля e-mail — поле будет обведено красной рамкой толщиной в 1 пиксель.
В форме есть собственно поле для ввода e-mail, блок span с идентификатором "valid", в который будет выводиться сообщение с результатами валидации и также имеется кнопка, которую мы сделаем изначально неактивной и будем активировать только в том случае, если введенный e-mail нас устраивает. Для того, чтобы деактивировать кнопку — добавим ей атрибут "disabled":
|
1 |
<p><input type="submit" name="submit" id="submit" value="Отправить" disabled /></p> |
Шаг 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, и в которых я рассказывал об основах работы с ним):
|
1 |
$(document).ready(function(){}); |
Внутри операторных (фигурных) скобок мы и будем писать весь наш код. Создадим переменную pattern, в которой и будет храниться шаблон:
|
1 2 3 |
$(document).ready(function(){ var pattern = //; }); |
Регулярное выражение пишется между двумя слешами, которые мы указали в переменной pattern. Теперь необходимо указать, что на соответствие шаблону будет проверяться вся строка от первого до последнего символа (поскольку часто ищут, допустим, символ/группу символов в тексте), т.е., вся введенная строка должна соответствовать формату электронной почты. Символом (или якорем — см. шпаргалку) начала строки есть "^", а конца строки — "$":
|
1 2 3 |
$(document).ready(function(){ var pattern = /^$/; }); |
Далее в адресе имеем 3 диапазона ("name", "mail" и "ru"), которые можно задать при помощи квадратных скобок:
|
1 2 3 |
$(document).ready(function(){ var pattern = /^[][][]$/; }); |
Первый и второй диапазоны разделены знаком собаки — «@» — второй и третий — точкой. Укажем эти символы:
|
1 2 3 |
$(document).ready(function(){ var pattern = /^[]@[].[]$/; }); |
Но в шпаргалке видим, что точка — это один из символов (мета-символы), которые должны быть экранированы, а экранируются символы точно также, как и в PHP, в JavaScript — при помощи обратного слеша:
|
1 2 3 |
$(document).ready(function(){ var pattern = /^[]@[]\.[]$/; }); |
Далее, количество символов в первом и втором диапазане должно быть как минимум 1. Максимум мы устанавливать не будем. Вновь заглянем в шпаргалку и видим, что здесь нам на помощь могут прийти кванторы, а именно — знак плюса, который обозначает 1 или больше символов, но не меньше 1:
|
1 2 3 |
$(document).ready(function(){ var pattern = /^[]+@[]+\.[]$/; }); |
Знак плюса мы хотим использовать именно как квантор, т.е., как специальный символ, а потому мы его, конечно же, ни в коем разе не экранируем. В третьем диапазоне мы укажем минимум и максимум символов. Минимум — 2 символа, максимум — 6. Делается это опять же при помощи кванторов, которые представлены в виде операторных скобок:
|
1 2 3 |
$(document).ready(function(){ var pattern = /^[]+@[]+\.[]{2,6}$/; }); |
Теперь мы должны указать, какие именно символы мы разрешаем использовать в каждом из диапазонов. Конечно же, в каждом будут разрешены все латинские буквы — как большие, так и маленькие. Для того, чтобы не указывать в диапазоне и большие, и маленькие буквы мы при помощи модификатора "i" укажем, что наш шаблон будет регистронезависимым:
|
1 2 3 |
$(document).ready(function(){ var pattern = /^[a-z]+@[a-z]+\.[a-z]{2,6}$/i; }); |
Итак, мы указали в каждой из трех частей диапазон [a-z] и указали, что шаблон не будет зависеть от регистра. Теперь давайте разрешим для первой и второй части цифры:
|
1 2 3 |
$(document).ready(function(){ var pattern = /^[a-z0-9]+@[a-z0-9]+\.[a-z]{2,6}$/i; }); |
В принципе, наш шаблон уже готов. Добавим в него еще некоторые символы, например тире и нижнее подчеркивание ("-", "_"):
|
1 2 3 |
$(document).ready(function(){ var pattern = /^[a-z0-9_-]+@[a-z0-9-]+\.[a-z]{2,6}$/i; }); |
Вот так вот пошагово мы составили простую регулярку, при помощи которой можем проверять действительно ли в поле введено что-то, соответствующее составленному шаблону. Чуть позже мы внесем в нее еще некоторые изменения.
Шаг 3. Пишем функционал jQuery.
Как уже говорилось, советую Вам ознакомиться с моими предыдущими уроками, в которых я рассказывал об основах работы с фреймворком jQuery. В нескольких словах можно сказать, что работа с jQuery состоит из 3-х этапов:
1. Отбор элементов и формирование «набора jQuery» (выборки);
2. Отслеживание событий, которые происходят с отобранными элементами;
3. Реакция на событие.
Элементами, которые мы будем отбирать, являются поле для ввода e-mail, поле для вывода сообщений с результатами валидации и кнопка «Отправить». Теперь о событии, точнее событиях, которые мы будем отслеживать. Как уже отмечалось, мы будем реализовывать 2 варианта:
проверять введенное после ввода и перехода к следующему элементу страницы, т.е., после того, как пользователь уйдет из поля для ввода e-mail и оно, соответственно, потеряет фокус;
проверять на соответствие после каждого введенного символа.
Начнем с первого варианта. За него отвечает событие «blur», которым мы и воспользуемся — это событие наступает в тот момент, когда элемент теряет фокус, т.е., в нашем случае, когда пользователь уйдет из поля e-mail.
А на третьем этапе мы будем реагировать на событие, связанное с отобранным элементом, а именно, когда произойдет событие blur относительно поля e-mail, мы проверим значение поля (т.е., строка, которую ввел пользователь) на соответствие шаблону и, если все хорошо, то выведем соответствующее сообщение и активируем кнопку, в противном случае — выведем сообщение о том, что такой e-mail нам не подходит и деактивируем кнопку, если она активна. Все просто.
Отберем элемент с идентификатором mail (это и будет нужное нам поле) и поместим его в переменную mail, поскольку мы будем обращаться к этому элементу еще не раз:
|
1 2 3 4 |
$(document).ready(function(){ var pattern = /^[a-z0-9_-]+@[a-z0-9-]+\.[a-z]{2,6}$/i; var mail = $('#mail'); }); |
Как уже отмечалось в предыдущих уроках, для того, чтобы знать как происходит отбор элементов в jQuery — достаточно знаний CSS. Далее мы отслеживаем событие потери фокуса с относительно отобранного элемента и, когда такое событие наступит — выполним анонимную функцию:
|
1 2 3 4 5 6 7 8 |
$(document).ready(function(){ var pattern = /^[a-z0-9_-]+@[a-z0-9-]+\.[a-z]{2,6}$/i; var mail = $('#mail'); mail.blur(function(){ }); }); |
Внутри функции мы и будем писать код. Прежде чем проверять введенное пользователем на соответствие шаблону, мы должны проверить ввел ли пользователь вообще что-то, ведь может так статься, что пользователь поместит курсор в поле, а затем просто выйдет из поля — событие blur произойдет, но в поле ничего не введено. Проверить это мы можем по условию: если не пусто значение поля — будем выполнять нужный нам код, иначе — выведем сообщение, что поле e-mail пусто:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$(document).ready(function(){ var pattern = /^[a-z0-9_-]+@[a-z0-9-]+\.[a-z]{2,6}$/i; var mail = $('#mail'); mail.blur(function(){ if(mail.val() != ''){ }else{ $('#valid').text('Поле e-mail не должно быть пустым!'); } }); }); |
В блоке иначе (else) мы отобрали в набор элемент с идентификатором "valid" (помним, что это span, в который выводим сообщения о валидации). Затем при помощи метода text мы добавляем в этот элемент текст "Поле e-mail не должно быть пустым!". Теперь мы можем даже протестировать то, что имеем на данный момент. Сохраним файл, обновим страницу и попробуем стать в поле e-mail (оно получает фокус), а затем просто уйти из него… Выводится нужное сообщение.
Замечательно! Идем дальше.
Мы также планировали добавлять полю класс "error", если что-то не так… это как раз один из таких случаев. Добавить класс элементу можно с помощью метода addClass():
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$(document).ready(function(){ var pattern = /^[a-z0-9_-]+@[a-z0-9-]+\.[a-z]{2,6}$/i; var mail = $('#mail'); mail.blur(function(){ if(mail.val() != ''){ }else{ $('#valid').text('Поле e-mail не должно быть пустым!'); mail.addClass('error'); } }); }); |
Переходим к блоку кода, когда условие выполняется, т.е., значение поля e-mail не является пустым. Здесь мы также должны использовать конструкцию условия. Условие будет таким: если совпадение найдено — добавляем класс "ok", активируем кнопку и выводим соответствующее сообщение… иначе — добавляем класс "error", деактивируем кнопку и выводим соответствующее сообщение. Проверить строку на соответствие шаблону нам поможет метод search(), параметром которого и будет созданная нами регулярка. Метод возвращает числовое значение, которое обозначает позицию первого найденного совпадения с регулярным выражением. Поскольку мы ищем с самого начала строки, т.е., с нулевого элемента, то в случае успеха — метод вернет ноль (т.е., совпадение найдено с начала строки). Если же совпадений нет, то метод вернет значение "-1" (минус единица).
Таким образом, в условии мы просто проверим, вернет ли метод search() ноль, если вернет — ok, иначе — error. Ну а разблокировать уже заблокированную кнопку мы сможем, воспользовавшись методом attr(), при помощи которого мы установим атрибут "disabled" в положение false, т.е., как бы деактивируем сам этот атрибут (в блоке иначе мы наоборот будем активировать этот атрибут, используя значение TRUE):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$(document).ready(function(){ var pattern = /^[a-z0-9_-]+@[a-z0-9-]+\.[a-z]{2,6}$/i; var mail = $('#mail'); mail.blur(function(){ if(mail.val() != ''){ if(mail.val().search(pattern) == 0){ $('#valid').text('Подходит'); $('#submit').attr('disabled', false); }else{ $('#valid').text('Не подходит'); $('#submit').attr('disabled', true); } }else{ $('#valid').text('Поле e-mail не должно быть пустым!'); mail.addClass('error'); } }); }); |
Также добавим класс "error", если e-mail не подходит и класс "ok", если адрес подходит. При этом не забываем удалять класс "error", если e-mail подходит, поскольку такой класс может быть установлен ранее — сделать это может метод removeClass(). Ну и не забудем деактивировать кнопку, если поле осталось пустым:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
$(document).ready(function(){ var pattern = /^[a-z0-9_-]+@[a-z0-9-]+\.[a-z]{2,6}$/i; var mail = $('#mail'); mail.blur(function(){ if(mail.val() != ''){ if(mail.val().search(pattern) == 0){ $('#valid').text('Подходит'); $('#submit').attr('disabled', false); mail.removeClass('error').addClass('ok'); }else{ $('#valid').text('Не подходит'); $('#submit').attr('disabled', true); mail.addClass('ok'); } }else{ $('#valid').text('Поле e-mail не должно быть пустым!'); mail.addClass('error'); $('#submit').attr('disabled', true); } }); }); |
Шаг 4. Модифицируем регулярное выражение.
Последнее, что мы сделаем — это немного изменим шаблон. Зачем, спросите Вы? Дело в том, что данный шаблон не пропустит некоторую, сравнительно небольшую, долю адресов e-mail… это адреса доменов третьего уровня. Например, возьмем условный сайт — site.net.ua. Почта такого сайта, соответственно, может выглядеть так: mail@site.net.ua — такой e-mail наш шаблон не пропустит. Дополним немного шаблон и добавим в него еще 1 необязательную группу символов. Помочь в этом нам сможет квантор «?», который говорит, что символ (или группа символов, как в нашем случае) необязателен, но, если он встретится, то только 1 раз — не более. Так как мы должны учесть, что в группе будут находиться некие символы и точка, то мы должны объединить эти символы с точкой в группу — здесь нам пригодиться диапазон группы — (…).
После небольшого дополнения регулярка примет следующий вид:
|
1 |
var pattern = /^[a-z0-9_-]+@[a-z0-9-]+\.([a-z]{1,6}\.)?[a-z]{2,6}$/i; |
Заключение.
Теперь все отлично.
Мы реализовали все те задачи, которые планировали в самом начале. В конце хотелось бы сказать несколько слов о том, что не следует забывать, что написанный код служит исключительно для улучшения юзабилити создаваемого веб-интерфейса и никогда не стоит забывать, что клиентские данные ВСЕГДА нужно проверять на стороне сервера. На этом урок закончен.
Ваши вопросы и отзывы жду в комментариях
С уважением Андрей Кудлай
Автор: Кудлай Андрей
Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.
Комментарии (55)