Валідація даних у формі – фрагменти коду і швидкі підказки

18

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


Валідація даних у формі – фрагменти коду і швидкі підказки

Тим не менш, валідація може сильно напружувати. Введення даних, що забирає багато часу і сил, стає дратівливим доповненням майже кожного проекту. Якщо ви не особливо сильні в кодуванні, то можете навіть засмутитися. Хоча за підтримки корисної бібліотеки коду воно може бути легким. У цьому пості ми обговоримо кілька коротких фрагментів, так що ви можете скопіювати і вставити повторюваний матеріал, а також пригадати найкращі рекомендації від користувачів.

Необхідні для заповнення поля

Деякі поля просто необхідно заповнювати – нам не потрібні відіслані порожні форми. Ім’я, поштова адреса основна інформація – хороші приклади необхідних полів, але, звичайно, все залежить від мети заповнення форми.

Валідація даних у формі – фрагменти коду і швидкі підказки

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

Клієнтська сторона (JavaScript)

function required(){
var first = document.forms[«myForm»].elements[«firstname»].value;
var last = document.forms[«myForm»].elements[«lastname»].value;
var email = document.forms[«myForm»].elements[«email»].value;
var message = document.forms[«myForm»].elements[«message»].value;
if(first == null || first == «» || last == null || last == «»){
alert(«First and last name fields are required.»);
return false;
}
else if(email == null || email == «»){
alert(‘An email address is required.’);
return false;
}
else if(message == null || message == «»){
alert(‘Message feild cannot be left blank.’);
return false;
}else{return true;}
}

Серверна сторона (PHP)

function required($firstname, $lastname, $email, $message){
if(empty($firstname) || empty($lastname)){
return false;
}
elese if(empty($email)){
return false;
}
elese if(empty($message)){
return false;
}else{return true;}
}

Відповідні поля

Два самих звичних поля, які потребують перевірки збіги – це поля введення пароля і електронної адреси. Завжди необхідно перевіряти двічі поле пароля, тому що: 1) користувач не бачить пароль при його написанні, тому може допустити помилку і 2) не пізніше ми зажадаємо від користувача увійти в систему (що він не зможе зробити, якщо запише невірний пароль).

Валідація даних у формі – фрагменти коду і швидкі підказки

Проте подвійна перевірка поля з електронною адресою – спірний предмет. Насправді це залежить від необхідності е-мейла на вебсайті. Для реєстрації, яка вимагає постійного оновлення електронного адреси або системи зворотного зв’язку, що вимагає відгуку, краще перевірити двічі, щоб упевнитися, що е-мейл правильний. Однак для інших чутливих до е-мейлу випадків подвійна перевірка все ж може виявитися занадто нав’язливою. Для таких простих речей, як підписка на розсилку новин, зазвичай можна пропустити подвійну перевірку, і замість цього «підтвердити» е-мейл іншими способами, наприклад, у формі сторінки підтвердження.

Клієнтська сторона (JavaScript)

function passwordmatch(form_id){
var pass1 = document.forms[«form_id»].elements [password].value;
var pass2 = document.forms[«form_id»].elements[«password2»].value;
if(pass1 != pass2){
alert(‘Passwords do not match!’);
return false;
}
}

Серверна сторона (PHP)

functin passwordmatch($password1, $password2){
if($password1 != $password2){
return false;
}else{return true;}
}

Правильний формат електронної пошти

Правильний формат е-мейла включає знак @, крапку (.) і дозволяє лише певні символи. Більш того, ці символи повинні розташовуватися у вірному порядку. Нижче є кілька уривків коду, як з боку клієнта, так і сервера, якими можна користуватися для підтвердження електронної пошти.

Валідація даних у формі – фрагменти коду і швидкі підказки

Клієнтська сторона (JavaScript)

function validate(form_id,email) {
var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])
+\.([A-Za-z]{2,4})$/;
var address = document.forms[«form_id»].elements[«email»].value;
if(reg.test(address) == false) {
alert(«Invalid Email Address»);
return false;
}
}

Серверна сторона (PHP)

function isValidEmail($e){
return preg_match(‘/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]
+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i’, $e);
}

Правильний формат номера (США)

Для перевірки правильності телефонного номера можна використовувати регулярні вирази. Наведені нижче фрагменти призначені для звичайного телефонного номера США, які під інші зразки потрібно буде переробити.

Валідація даних у формі – фрагменти коду і швидкі підказки

Клієнтська сторона (JavaScript)

function validate(form_id,phone) {
var reg = /\(?\d{3}\)?[-\s.]?\d{3}[-\s.]\d{4}/x;
var phone = document.forms[«form_id»].elements[«phone»].value;
if(reg.test(phone) == false) {
alert(‘Invalid Phone Number: XXX-XXX-XXXX’);
return false;
}
}

Серверна сторона (PHP)

function validatePhone($phoneNo){
return preg_match(‘/\(?\d{3}\)?[-\s.]?\d{3}
[-\s.]\d{4}/x’, $phoneNo);
}

Правильний формат поштового індексу (США і Канада)

Наступні уривки коду – для підтвердження поштового індексу тільки США і Канади, але, швидше за все, в будь-якому випадку ці формати найпоширеніші. Якщо потрібний формат для іншої країни, можна використовувати схожий варіант іншого типу цифр індексу або поштової адреси.

Валідація даних у формі – фрагменти коду і швидкі підказки

Клієнтська сторона (JavaScript)

function isValidPostalCode(postalCode, countryCode) {
switch (countryCode) {
case «US»:
postalCodeRegex = /^([0-9]{5})(?:[-\s]*([0-9]{4}))?$/;
break;
case «CA»:
postalCodeRegex = /^([A-Z][0-9][A-Z])\s*([0-9][A-Z][0-9])$/;
break;
default:
postalCodeRegex = /^(?:[A-Z0-9]+([- ]?[A-Z0-9]+)*)?$/;
}
return postalCodeRegex.test(postalCode);
}

Серверна сторона (PHP)

function validateZipCode($postalCode, $countryCode){
switch ($countryCode){
case «US»:
$countryformat = «/^([0-9]{5})(?:[-\s]*([0-9]{4}))?$/»;
break;
case «CA»:
$countryformat = «/^([A-Z][0-9][A-Z])\s*([0-9][A-Z][0-9])$/»;
break;
default:
$countryformat = «/^(?:[A-Z0-9]+([- ]?[A-Z0-9]+)*)?$/»;
}
return preg_match(‘$countryformat’, $postalCode);
}

Що-то дійсно вибирається/подбираемое

Іноді вам потрібно щось з наявними за замовчуванням значенням. Тут ми не можемо просто перевірити, порожнє поле, тому, що воно не може залишатися таким.

Валідація даних у формі – фрагменти коду і швидкі підказки

Внизу наведено приклад, де у користувача в списку є опції, а значення, вибране за замовчуванням — «Select One» (виберіть зі списку). Звичайно, нам не потрібно, щоб користувач вибрав «Select One», тому що так він не дасть нам ніякої цінної інформації. Схожі ситуації можуть використовуватися для кнопок вибору опцій або зумовлених полів введення.

Select One Photoshop, Fireworks Illustrator, GIMP

Валідація не потрібно, якщо на першому місці не буде перебувати опція «Виберіть зі списку» («Select One»), але для того, щоб переконатися, що користувач щось діяльно обирав замість того, щоб пропустити цю частину форми, нам слід створити цю порожню опцію.

Клієнтська сторона (JavaScript)

function required(){
var graphicsProgram = document.forms[«myForm»].elements[«graphicsProgram»].value;
if(graphicsProgram == «Select One»){
alert(«Please choose a graphics program.»);
return false;
}else{return true;}
}

Серверна сторона (PHP)

function required($graphicsProgram){
if($graphicsProgram == «Select One»){
return false;
}
}else{return true;}
}

У діапазоні

Інша звичайна форма валідації, заслуговує фрагмента коду, це перевірка того, чи знаходяться номер або дата в якому-небудь діапазоні. Хороший приклад тому – дата народження, де людина не може бути молодше або старше певного віку. Інші зразки використання діапазону можуть включати оцінку доходів, підрахунок відстані або інші дані, де потрібно вибрати точне число, але в певних межах.

Birthday:

Jan Feb Mar Apr Jun Jul Aug Sept Oct Nov Dec

Інший спосіб роботи з датами і діапазонами – постійно використовувати об’єкт дати (як в JavaScript, так і в PHP і інших мовах програмування). Насправді, це буде більш вірний спосіб все зробити, особливо якщо при виборі діапазону були важливі точні день і місяць. Однак, щоб зробити це рішення більш універсальним, ми скомпілювали нижченаведений код.

Аналогічну техніку можна застосувати до багатьох користувальницьким рішень.

Клієнтська сторона (JavaScript)

function withinrange(){
var currentYear = 2010;
var birthYear = document.forms[«myForm»].elements[«year»].value;
var tooOld = currentYear — 100;
var tooYoung = currentYear — 13;
if(tooYoung birthYear){
alert(«You can’t possibly be that old!»);
return false;
}
else{return true;}
}

Серверна сторона (PHP)

function withinrange($birthYear){
$currentYear = 2010;
$tooOld = $currentYear — 100;
$tooYoung = $currentYear — 13;
if($tooYoung $birthYear){
return false;
}
else{return true;}
}

Captcha

Нарешті, коли все вже сказано і зроблено, а форма заповнена, ви, щонайменше, хотіли б переконатися, що дані в форму вводить людей. Для уникнення спам-ботів і хакерських атак завжди перед відправкою форми вмикайте повністю автоматизований відкритий тест Тюрінга з розпізнавання людей і машин, т. зв. captcha. Це легко зробити на клієнтській стороні, а часу він займає всього секунду.

Валідація даних у формі – фрагменти коду і швидкі підказки

Деякі розробники воліють створювати свій власний captcha через серію зображень, простих запитань (Якого кольору яблуко?) або нескладної арифметики. Хоча використовувати готовий сервіс captcha типу reCAPTCHA теж зручно.

Висновок

Форма введення даних не повинна бути складною або займає багато часу. У багатьох випадках форма валідації складається з одного і того ж коду, від форми до форми, від вебсайту до вебсайту. Насправді, вони не дуже різноманітні, так що для економії часу і сил зручно використовувати готові фрагменти коду. Не соромтеся брати вищенаведені приклади, змінюйте їх так, як потрібно і, звичайно, виключайте ці подразнюючі сигнали про помилки з JavaScript і замінюйте їх чимось більш підходящим для користувача (користуйтеся ними в цілях тестування). Дуже зручно поєднувати їх з іншими фрагментами коду і, може бути, з шаблонами розмітки форм.

Це лише деякі з багатьох видів валідації даних і, певною мірою, вони найбільш поширені. Будь ласка, поділіться уривками коду або вдалими методиками, якими ви користувалися, працюючи над формами, стосуються вони дуже специфічних випадків або простих альтернатив наведеним вище загальновідомим кодовою фрагментів.

Валідація даних у формі – фрагменти коду і швидкі підказки

E-mail: [email protected]