Валідація в HTML5

ВведенняІнтерактивні веб-сайти і додатки неможливо уявити без форм, які дозволяють нам спілкуватися з нашими користувачами і отримувати дані, необхідні для забезпечення гладких угод з ними. У той час як ми можемо поліпшити зручність і простоту використання наших форм з вдало вибраним шаблоном проектування UX. HTML5 також має власний механізм для обмеження перевірки, який дозволяє нам зловити помилки введення прямо на фронт енді.
Перевірка вводу має основну мету — безпека. Коли мова йде про безпеку, це означає, що ми повинні запобігти ін'єкції шкідливого контенту — будь то навмисні або випадкові.При перевірці зовнішнього інтерфейсу вводу, наша робота полягає в тому, щоб встановити розумні обмеження на введення даних користувачем.
image

Валідація в HTML5 До появи HTML5 фронт-енд розробники були обмежені у перевірці користувальницького введення використанням JavaScript. Це був виснажливим і схильний до помилок процес. Для поліпшення перевірки на стороні клієнта, HTML5 ввів алгоритм перевірки обмежень, який працює в сучасних браузерах, і перевіряє правильність користувальницького введення.
Завдяки функції перевірки обмежень в HTML5, ми можемо виконати всі стандартні задачі перевірки вхідних даних на стороні клієнта без JavaScript, виключно з HTML5.
Крім тих типів вхідних даних, які вже існували до HTML5 (text, password,submit, reset, radio, checkbox, button, hidden), ми можемо також використовувати наступні смислові HTML5 типи: email, tel, url, number, time, date, datetime, datetime-local, month, week, range, search, color.
Ми можемо безпечно використовувати типи вхідних даних у форматі HTML5 зі старими браузерами, так як вони будуть вести себе як поле в браузерах, що не підтримують їх.

Пара прикладів атрибутів для валідації Використання таких семантичних атрибутів для валідації може бути дуже корисним і навіть може допомогти нам більше, ніж ми думаємо:
1) requiredRequired є найвідомішим атрибутом в валідації HTML. У нього не може бути значення. Просто теги, які використовують цей атрибут, не повинні бути порожніми.

<input type="text" name="text" class="mytext" required>

Він може бути використаний в наступних инпутах: url, email, text, password, date, month, week, tel, search, select, textarea, file, checkbox, time, number. Наприклад, користувач може забути ввести значення у полі вводу. У цьому випадку повідомлення про помилку буде висвічується до тих пір, поки це поле не заповнено правильно. Тому важливо завжди візуально позначати для користувача поля, обов'язкові для заповнення.
2) maxlengthЦей атрибут дозволяє встановити максимальну довжину тексту, що вводиться для текстового поля. Maxlength може бути використаний в наступних инпутах: textarea, password, url, tel, text і search.
У цьому textarea ліміт символів буде до 350.

<textarea name="message" id="message" cols="40" rows="6" maxlength="350"></textarea>

Maxlength не покаже помилку, але браузер не дозволить користувачеві ввести більше вказаного числа символів. Гарним прикладом може бути тег tel — pole для телефонного номера, який не може мати більше певної кількості символів, або форми зворотного зв'язку, де ми не хочемо, щоб користувачі писали повідомлення більше певної довжини.
3) max, minАтрибут min і max можуть допомогти вказувати діапазон між мінімальному і максимальному номером. Ми можемо використовувати ці атрибути в наступних инпутах: date, time, week, range, number та month. У наступному прикладі ми можемо бачити мінімальну і максимальну різницю у віці від 18 до 65 років.

<input type="age" name="age" min="18" max="65">

Якщо користувач введе вік до 17 років чи після 66 років, то він отримає повідомлення про помилку, при тому що цей запит не буде відправлений на сервер.
4) stepАтрибут step можна використовувати для числового інтервалу. У наступному прикладі є input number де ми вказуємо мінімальний і максимальний рік, але ми додаємо step=«4». Це означає, що при кожній зміні значення буде змінюватися з кроком 4 роки.

<input type="number" name="leapyear" min="1972" max="2016" step="4">

Користувач може також ввести вручну в полі введення, але в цьому випадку, якщо воно не відповідає нормативам, браузер видасть повідомлення про помилку.
5) patternАтрибут патерн використовує регулярний вираз для валідації цього поля. Регулярний вираз являє собою заздалегідь визначений набір символів, які утворюють певний шаблон. Ми можемо використовувати його для пошуку рядків, які йдуть шаблоном, або для забезпечення певного формату, визначеного шаблону.
Наведений нижче приклад вимагає від користувачів вводити пароль, який містить мінімально 8 символів, і включає принаймні одну букву і одну цифру:

<input type="password" name="password" required pattern="^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$">

ВисновокУ цій статті ми розглянули те, як використовувати наданий браузером алгоритм перевірки форм і обмежень в HTML5. Зазвичай ми можемо це робити за допомогою JavaScript або PHP, але для початку, щоб оптимізувати звернення до бази даних або стороннім скриптам, ми можемо використовувати HTML5.
Джерело: Хабрахабр
  • avatar
  • 0

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.