Введення в перевірку обмежень HTML5
Інтерактивні веб-сайти та програми не можна уявити без форм, які дозволяють нам зв’яжіться з нашими користувачами, і до отримати дані нам потрібно для того, щоб забезпечити безперебійну взаємодію з ними. Ми потребуємо дійсний вхід користувача, однак нам треба її придбати таким чином не заважає наші користувачі занадто багато.
Хоча ми можемо покращити зручність використання наших форм за допомогою вишуканих шаблонів дизайну UX, HTML5 також має власний механізм перевірки обмежень, який дозволяє нам ловити вхідні помилки прямо в інтерфейсі.
У цій публікації ми зосередимося перевірка обмежень, надана браузером, і подивіться, як можуть розробники інтерфейсів захистити дійсний ввід користувача за допомогою HTML5.
Чому нам потрібна перевірка вхідних даних
Перевірка вхідних даних має дві основні цілі. Вміст, який ми отримуємо, має бути:
1. Корисно
Нам потрібно використовувані дані, з якими можна працювати. Ми повинні змусити людей увійти реалістичні дані у правильному форматі. Наприклад, ніхто, хто живий сьогодні, не народився 200 років тому. Отримання даних, подібних до цього, може здатися забавним спочатку, але в довгостроковій перспективі це дратує, і заповнює нашу базу даних даремними даними.
2. Безпечний
Посилаючись на безпеку, це означає, що нам потрібно запобігти ін'єкції шкідливого вмісту - навмисне чи навмисне.
Корисність (отримання розумних даних) може бути досягнута тільки на стороні клієнта, Команда backend не може допомогти занадто багато з цим. Для досягнення безпеки, розробникам front-і backend необхідно працювати разом.
Якщо розробники інтерфейсу належним чином перевіряють введення на стороні клієнта, команді бекенда доведеться мати справу з набагато меншою вразливістю. Хакінг (сайт) часто тягне за собою надання додаткових даних, або дані в неправильному форматі. Розробники можуть боротися з отворами безпеки, як вони, успішно боротися з інтерфейсом.
Наприклад, цей посібник з безпеки PHP рекомендує перевірити все, що ми можемо на стороні клієнта. Вони підкреслюють важливість перевірки вхідних даних інтерфейсу, надаючи багато прикладів, таких як:
"Перевірка вхідних даних найкраще працює з дуже обмеженими значеннями, наприклад, коли щось має бути цілим чи алфавітно-цифровим рядком або URL-адресою HTTP."
У валідації вхідного інтерфейсу, наша робота полягає в тому, щоб накладають обґрунтовані обмеження на вхід користувача. Функція перевірки обмежень HTML5 надає нам засоби для цього.
Перевірка обмежень HTML5
До HTML5, розробники фронтендів були обмежені перевірка вводу користувача за допомогою JavaScript, це був нудний і схильний до помилок процес. Щоб покращити перевірку форм на стороні клієнта, HTML5 ввів a перевірка обмежень алгоритм, який виконується в сучасних браузерах, і перевіряє достовірність поданих вхідних даних.
Щоб зробити оцінку, алгоритм використовує атрибути вхідних елементів, пов'язані з перевіркою, як от ,
, і
. Якщо ви хочете знати, як перевірка обмежень відбувається крок за кроком в браузері, перевірте цей документ WhatWG.
Завдяки функції перевірки обмежень HTML5, ми можемо виконати всі стандартні завдання перевірки введення на стороні клієнта без JavaScript, виключно з HTML5.
Щоб виконати більш складні завдання, пов'язані з перевіркою, HTML5 надає нам a API JavaScript для перевірки обмежень ми можемо використовувати для налаштування наших спеціальних сценаріїв перевірки.
Перевірка за допомогою семантичних типів входів
Введено HTML5 семантичні типи вхідних даних що - крім вказівки значення елемента для агентів користувача - також можна використовувати перевірити вхід користувача шляхом обмеження користувачів на певний формат введення.
Крім типів введення, які вже існували до HTML5 (текст
, пароль
, подати
, скидання
, радіо
, прапорець
, кнопки
, приховано
), ми також можемо використовувати наступне семантичні типи введення HTML5: електронною поштою
,тел
,url
,номер
,час
,дата
,дата, час
,datetime-local
, місяць
,тиждень
, діапазон
, пошук
,колір
.
Ми можемо безпечно використовувати типи введення HTML5 зі старими браузерами, оскільки вони будуть вести себе як поля в браузерах, які не підтримують їх.
Давайте подивимося, що відбувається, коли користувач вводить неправильний тип введення. Скажімо, ми створили поле введення електронної пошти з таким кодом:
Коли користувач вводить рядок, який не використовує формат електронної пошти, алгоритм перевірки обмежень не подає форму, і повертає повідомлення про помилку:
Це ж правило застосовується і до інших типів вводу, наприклад, для type = "url"
користувачі можуть лише подати вхідні дані, що слідують за форматом URL (починається з протоколу, наприклад http: //
або ftp: //
).
Деякі типи вхідних даних використовують дизайн навіть не дозволяють користувачам вводити неправильний формат введення, наприклад колір
і діапазон
.
Якщо ми використовуємо колір
тип введення, який користувач обмежується вибором кольору з палітри кольорів або перебуванням із чорним кольором за замовчуванням. Поле вводу обмежений дизайном, тому це не залишає великих шансів на помилку користувача.
Коли це доречно, варто розглянути можливість використання HTML-тег, який працює подібно до цих типів вхідних даних, обмежених за проектом; вона дозволяє користувачам вибирати зі спадного списку.
Використовуйте атрибути перевірки HTML5
Використання типів семантичних входів задає певні обмеження на те, що користувачі можуть подавати, але в багатьох випадках ми хочемо піти трохи далі. Це коли атрибути, пов'язані з перевіркою з може допомогти нам.
Атрибути, пов'язані з перевіркою, належать до певних типів вхідних даних (їх не можна використовувати все типи), на яких вони накладають додаткові обмеження.
1. вимагається
для отримання дійсного входу всіма засобами
The вимагається
атрибут є найбільш відомим атрибутом перевірки HTML. Це boolean атрибут це означає не приймає ніякої цінності, ми просто просто повинні розмістити його всередині тег, якщо ми хочемо його використовувати:
Якщо користувач забуває ввести значення в потрібне поле введення, переглядач повертає повідомлення про помилку що попереджає їх заповнити поле, і вони не може надіслати форму поки вони не нададуть правильний вхід. Тому завжди важливо позначити візуально обов'язкові поля для користувачів.
The вимагається
атрибут може бути використовуються разом з наступними типами входів: текст
, пошук
, url
, тел
, електронною поштою
, пароль
, дата
, дата, час
, datetime-local
, місяць
, тиждень
,час
, номер
, прапорець
, радіо
, файл
, плюс з і
Теги HTML.
2. хв
, макс
і крок
для перевірки номера
The хв
, макс
і крок
атрибути дозволяють нам покласти обмеження на поля введення чисел. Їх можна використовувати разом з діапазон
, номер
, дата
, місяць
, тиждень
, дата, час
, datetime-local
, і час
типи вхідних даних.
The хв
і макс
атрибути забезпечують чудовий спосіб легко виключити необгрунтовані дані. Наприклад, наведений нижче приклад змушує користувачів подавати вік від 18 до 120 років.
Коли алгоритм перевірки обмеження переходить на вхід користувача менше, ніж хв
, або більше, ніж макс
значення, воно запобігає його досягненню в backend і повертає повідомлення про помилку.
The крок
атрибут вказує числовий інтервал між правовими значеннями числового поля введення. Наприклад, якщо ми хочемо, щоб користувачі обирали тільки з високосних років, ми можемо додати step = "4"
атрибут поля. У наведеному нижче прикладі я використав номер
тип введення, так як немає type = "year"
у HTML5.
З попередньо встановленими обмеженнями, користувачі можуть вибирати лише з високосних років між 1972 і 2016 роками, якщо вони використовують маленьку стрілку, яка постачається з номер
тип введення. Вони також можуть ввести значення вручну у поле введення, але у випадку, якщо це не відповідає обмеженням, браузер поверне повідомлення про помилку.
3. maxlength
для перевірки довжини тексту
The maxlength
Атрибут дозволяє встановити максимальну довжину символу для текстових полів введення. Його можна використовувати разом з текст
, пошук
, url
, тел
, електронною поштою
і пароль
типів вхідних даних і з Тег HTML.
The maxlength
атрибут може бути відмінним рішенням для полів телефонних номерів, які не можуть містити більше певної кількості символів, або для контактних форм, де ми не хочемо, щоб користувачі писали більше певної довжини.
Фрагмент коду нижче показує приклад для останнього, він обмежує повідомлення користувачів на 500 символів.
The maxlength
атрибут не повертає повідомлення про помилку, але браузер просто не дозволяє користувачам вводити більше, ніж вказаний номер символу. Тому дуже важливо інформувати користувачів про обмеження, інакше вони не зрозуміють, чому вони не можуть продовжувати друкувати.
4. візерунок
для перевірки Regex
The візерунок
Атрибут дозволяють нам використовуйте регулярні вирази в процесі перевірки вхідних даних. Регулярний вираз a попередньо визначений набір символів що формують певний зразок. Ми можемо використовувати його або для пошуку рядків, які слідують шаблону, або для застосування певного формату, визначеного шаблоном.
З візерунок
атрибут, ми можемо зробити останнє - обмежувати користувачів подавати свої вхідні дані у форматі відповідає заданому регулярному виразу.
The візерунок
атрибут має багато випадків використання, але він може бути особливо корисним, коли ми хочемо перевірити поле пароля.
Наведений нижче приклад вимагає, щоб користувачі ввели пароль довжиною не менше 8 символів і містили принаймні одну літеру та одне число (джерело використовуваного регулярного виразу).
Ще кілька речей
У цій статті ми розглянули, як використовувати перевірка форм, надана браузером наданий HTML5 нативним алгоритмом перевірки обмежень. Для створення власних сценаріїв перевірки потрібно використовувати API перевірки обмежень, який може бути наступним кроком у вдосконаленні навичок перевірки форми.
Форми HTML5 доступні за допомогою допоміжних технологій, тому ми не обов'язково повинні використовувати aria-обов'язкова
Атрибут ARIA для позначення необхідних полів введення для читання з екрану. Проте досі можна додати підтримку доступності для старих браузерів. Це також можливо відмовитися від перевірки обмежень шляхом додавання новалидат
логічний атрибут до елемент.