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

Дата публикации: 2011-07-26

валидация email

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

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

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

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

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

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

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

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

<!DOCTYPE html>
<html xmlns="http://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>

<!DOCTYPE html>

<head>

.ok{

border: 1px solid green;

}

.error{

border: 1px solid red;

}

</style>

<title>Валидация поля E-mail</title>

</head>

<body>

<form>

</form>

</body>

</html>

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

<style type="text/css">
 .ok{
  border: 1px solid green;
 }
 .error{
  border: 1px solid red;
 }
</style>

.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":

<p><input type="submit" name="submit" id="submit" value="Отправить" disabled /></p>

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 и другого (http://regexlib.com/DisplayPatterns.aspx). В дополнительных материалах Вы также найдете своеобразную шпаргалку по регулярным выражениям.

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

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

$(document).ready(function(){});

1	$(document).ready(function(){});

Внутри операторных (фигурных) скобок мы и будем писать весь наш код. Создадим переменную pattern, в которой и будет храниться шаблон:

$(document).ready(function(){
 var pattern = //;
});

$(document).ready(function(){

var pattern = //;

});

Регулярное выражение пишется между двумя слешами, которые мы указали в переменной pattern. Теперь необходимо указать, что на соответствие шаблону будет проверяться вся строка от первого до последнего символа (поскольку часто ищут, допустим, символ/группу символов в тексте), т.е., вся введенная строка должна соответствовать формату электронной почты. Символом (или якорем — см. шпаргалку) начала строки есть "^", а конца строки — "$":

$(document).ready(function(){
 var pattern = /^$/;
});

$(document).ready(function(){

var pattern = /^$/;

});

Далее в адресе имеем 3 диапазона ("name", "mail" и "ru"), которые можно задать при помощи квадратных скобок:

$(document).ready(function(){
 var pattern = /^[][][]$/;
});

$(document).ready(function(){

var pattern = /^[][][]$/;

});

Первый и второй диапазоны разделены знаком собаки — «@» — второй и третий — точкой. Укажем эти символы:

$(document).ready(function(){
 var pattern = /^[]@[].[]$/;
});

$(document).ready(function(){

var pattern = /^[]@[].[]$/;

});

Но в шпаргалке видим, что точка — это один из символов (мета-символы), которые должны быть экранированы, а экранируются символы точно также, как и в PHP, в JavaScript — при помощи обратного слеша:

$(document).ready(function(){
 var pattern = /^[]@[]\.[]$/;
});

$(document).ready(function(){

var pattern = /^[]@[]\.[]$/;

});

Далее, количество символов в первом и втором диапазане должно быть как минимум 1. Максимум мы устанавливать не будем. Вновь заглянем в шпаргалку и видим, что здесь нам на помощь могут прийти кванторы, а именно — знак плюса, который обозначает 1 или больше символов, но не меньше 1:

$(document).ready(function(){
 var pattern = /^[]+@[]+\.[]$/;
});

$(document).ready(function(){

var pattern = /^[]+@[]+\.[]$/;

});

Знак плюса мы хотим использовать именно как квантор, т.е., как специальный символ, а потому мы его, конечно же, ни в коем разе не экранируем. В третьем диапазоне мы укажем минимум и максимум символов. Минимум — 2 символа, максимум — 6. Делается это опять же при помощи кванторов, которые представлены в виде операторных скобок:

$(document).ready(function(){
 var pattern = /^[]+@[]+\.[]{2,6}$/;
});

$(document).ready(function(){

var pattern = /^[]+@[]+\.[]{2,6}$/;

});

Теперь мы должны указать, какие именно символы мы разрешаем использовать в каждом из диапазонов. Конечно же, в каждом будут разрешены все латинские буквы — как большие, так и маленькие. Для того, чтобы не указывать в диапазоне и большие, и маленькие буквы мы при помощи модификатора "i" укажем, что наш шаблон будет регистронезависимым:

$(document).ready(function(){
 var pattern = /^[a-z]+@[a-z]+\.[a-z]{2,6}$/i;
});

$(document).ready(function(){

var pattern = /^[a-z]+@[a-z]+\.[a-z]{2,6}$/i;

});

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Итак, мы указали в каждой из трех частей диапазон [a-z] и указали, что шаблон не будет зависеть от регистра. Теперь давайте разрешим для первой и второй части цифры:

$(document).ready(function(){
 var pattern = /^[a-z0-9]+@[a-z0-9]+\.[a-z]{2,6}$/i;
});

$(document).ready(function(){

var pattern = /^[a-z0-9]+@[a-z0-9]+\.[a-z]{2,6}$/i;

});

В принципе, наш шаблон уже готов. Добавим в него еще некоторые символы, например тире и нижнее подчеркивание ("-", "_"):

$(document).ready(function(){
 var pattern = /^[a-z0-9_-]+@[a-z0-9-]+\.[a-z]{2,6}$/i;
});

$(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, поскольку мы будем обращаться к этому элементу еще не раз:

$(document).ready(function(){
 var pattern = /^[a-z0-9_-]+@[a-z0-9-]+\.[a-z]{2,6}$/i;
 var mail = $('#mail');
});

$(document).ready(function(){

var pattern = /^[a-z0-9_-]+@[a-z0-9-]+\.[a-z]{2,6}$/i;

var mail = $('#mail');

});

Как уже отмечалось в предыдущих уроках, для того, чтобы знать как происходит отбор элементов в jQuery — достаточно знаний CSS. Далее мы отслеживаем событие потери фокуса с относительно отобранного элемента и, когда такое событие наступит — выполним анонимную функцию:

$(document).ready(function(){
 var pattern = /^[a-z0-9_-]+@[a-z0-9-]+\.[a-z]{2,6}$/i;
 var mail = $('#mail');
 
 mail.blur(function(){
 
 });
});

$(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 пусто:

$(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 не должно быть пустым!');
 }
 });
});

$(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():

$(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');
 }
 });
});

$(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):

$(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');
 }
 });
});

$(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(). Ну и не забудем деактивировать кнопку, если поле осталось пустым:

$(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);
 }
 });
});

$(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 раз — не более. Так как мы должны учесть, что в группе будут находиться некие символы и точка, то мы должны объединить эти символы с точкой в группу — здесь нам пригодиться диапазон группы — (…).

После небольшого дополнения регулярка примет следующий вид:

var pattern = /^[a-z0-9_-]+@[a-z0-9-]+\.([a-z]{1,6}\.)?[a-z]{2,6}$/i;

1	var pattern = /^[a-z0-9_-]+@[a-z0-9-]+\.([a-z]{1,6}\.)?[a-z]{2,6}$/i;

Заключение.

Теперь все отлично.

Мы реализовали все те задачи, которые планировали в самом начале. В конце хотелось бы сказать несколько слов о том, что не следует забывать, что написанный код служит исключительно для улучшения юзабилити создаваемого веб-интерфейса и никогда не стоит забывать, что клиентские данные ВСЕГДА нужно проверять на стороне сервера. На этом урок закончен.

Ваши вопросы и отзывы жду в комментариях

С уважением Андрей Кудлай

Автор: Кудлай Андрей

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс