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

17

Від автора: у цьому уроці ми знову торкнемося такої теми, як юзабіліті, яку ми вже торкалися в ряді попередніх уроків. Зараз ми реалізуємо таку річ, як перевірка електронної адреси, яку ввів користувач (email), «на льоту», тобто без відправки даних на сервер, а безпосередньо на стороні клієнта. Це буде не тільки зручно, але ще й додасть сторінці більшої ефектності. Крім того, таким чином, знімається зайве навантаження на сайт — адже не надсилаються зайві запити на сервер.

Реалізовувати поставлену задачу, ми будемо за допомогою 2-х коштів:

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

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

Крок 1. Формування завдань.

Власне, таку штуку, я думаю, Ви вже не раз бачили на всіляких сайтах. Є поле для введення e-mail, коли Ви вводите адресу пошти у це поле і потім переходите до іншого поля, поруч з полем e-mail виводиться повідомлення у якому-небудь виді про те, що такий e-mail підходить чи не підходить. Іноді таке повідомлення з’являється зовсім вже «на льоту», тобто, як тільки Ви починаєте вводити символи з клавіатури — ці символи відразу ж починають перевірятися на відповідність шаблону. Я покажу, як реалізовується обидва варіанти, а який вибрати — вирішувати вже Вам. Отже, приступимо.

Перш за все, створимо звичайну HTML-сторінку з кількома правилами стилів і невеликий формою:

.ок{
border: 1px solid green;
}
.error{
border: 1px solid red;
}
Валідація поля E-mail

E-mail:

Давайте трохи розберемо структуру документа. Насамперед, ми маємо 2 правила CSS:

.ок{
border: 1px solid green;
}
.error{
border: 1px solid red;
}

Клас «ok» буде використаний для виділення поля в тому разі, коли нас влаштовує введений користувачем e-mail — поле буде обведено зеленою рамкою товщиною в 1 піксель. Клас «error» буде використаний для виділення поля в тому разі, коли нас не влаштовує вміст поля e-mail — поле буде обведено червоною рамкою товщиною в 1 піксель.

У формі є власне поле для введення e-mail, блок span з ідентифікатором «valid», який буде виводитися повідомлення з результатами валідації і також є кнопка, яку ми зробимо спочатку неактивній і будемо активувати тільки в тому випадку, якщо введений e-mail нас влаштовує. Для того, щоб вимкнути кнопку — додамо їй атрибут «disabled»:

Крок 2. Складаємо регулярний вираз.

Тепер трохи поговоримо про валідації поля e-mail, тобто, перевірки того, що нам прислав користувач, на відповідність з певним шаблоном. Будь поштова адреса має певний формат… наприклад, такий — «[email protected]». Тобто, тут присутні 3 частини, розділені між собою знаком собаки — «@» — і точкою — «.». Ось цей ось зразок і буде нашим шаблоном, на відповідність до яких ми будемо перевіряти те, що отримаємо від користувача в якості поштової адреси. Якщо отримане буде відповідати шаблону — пропускаємо такий e-mail, якщо ні, то — ні. Перевірити на 100% свій e-mail ввів користувач за допомогою шаблону ми, звичайно ж, не зможемо — це не можливо в принципі, оскільки користувач може ввести рядок зовні схожу на формат електронної адреси, наприклад той же [email protected] Формат відповідає шаблону, але це зовсім не означає, що така пошта існує або, якщо існує, зареєстрована на користувача, який заповнює в даний момент форму. Тому 100% перевіркою є тільки відправлення на введений e-mail листа з посиланням для підтвердження введеного поштової адреси. Але для запобігання випадки, коли в поле e-mail вводиться просто набір символів, нам знадобиться саме порівняння введеного з шаблоном.

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

Регулярні вирази — це дуже потужний засіб перевірок, але бажано їх використовувати тільки там, де без них справді не обійтися.

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

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

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

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

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

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

Далі в адресі маємо 3 діапазону («name», «mail» і «ru»), які можна задати за допомогою квадратних дужок:

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

Перший і другий діапазони розділені знаком собаки — «@» — другий і третій — точкою. Зазначимо ці символи:

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

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

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

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

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

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

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

Тепер ми повинні вказати, які саме символи ми дозволяємо використовувати в кожному з діапазонів. Звичайно ж, у кожному будуть дозволені всі латинські літери — як великі, так і маленькі. Для того, щоб не вказувати в діапазоні і великі, і маленькі букви ми за допомогою модифікатора «i» зазначимо, що наш шаблон буде регістронезавісімий:

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

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

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

В принципі, наш шаблон вже готовий. Додамо в нього ще деякі символи, наприклад тире і нижнє підкреслення («-«, «_»):

$(document).ready(function(){
var pattern = /^[a-z0-9_-][email protected][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_-][email protected][a-z0-9-]+\.[a-z]{2,6}$/i;
var mail = $(‘#mail’);
});

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

$(document).ready(function(){
var pattern = /^[a-z0-9_-][email protected][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_-][email protected][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_-][email protected][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_-][email protected][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_-][email protected][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. Пошта такого сайту, відповідно, може виглядати так: [email protected] — такий e-mail наш шаблон не пропустить. Доповнимо трохи шаблон і додамо в нього ще 1 необов’язкову групу символів. Допомогти нам у цьому зможе квантор «?», який говорить, що символ або група символів, як у нашому випадку) є обов’язковим, але, якщо він зустрінеться, то тільки 1 раз — не більше. Так як ми повинні врахувати, що в групі будуть перебувати певні символи та точка, то ми повинні об’єднати ці символи з точкою у групу — тут нам придатися діапазон групи — (…).

Після невеликого доповнення регулярка прийме наступний вигляд:

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

Висновок.

Тепер все відмінно.

Ми реалізували всі ті завдання, які планували на самому початку. В кінці хотілося б сказати кілька слів про те, що не слід забувати, що написаний код служить виключно для поліпшення юзабіліті створюваного веб-інтерфейсу і ніколи не варто забувати, що клієнтські дані ЗАВЖДИ потрібно перевіряти на стороні сервера. На цьому урок закінчений.

Ваші запитання, відгуки чекаю в коментарях

З повагою Андрій Кудлай