Головна » Веб дизайн » Введення в перевірку обмежень HTML5

    Введення в перевірку обмежень HTML5

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

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

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

    Чому нам потрібна перевірка вхідних даних

    Перевірка вхідних даних має дві основні цілі. Вміст, який ми отримуємо, має бути:

    1. Корисно

    Нам потрібно використовувані дані, з якими можна працювати. Ми повинні змусити людей увійти реалістичні дані у правильному форматі. Наприклад, ніхто, хто живий сьогодні, не народився 200 років тому. Отримання даних, подібних до цього, може здатися забавним спочатку, але в довгостроковій перспективі це дратує, і заповнює нашу базу даних даремними даними.

    2. Безпечний

    Посилаючись на безпеку, це означає, що нам потрібно запобігти ін'єкції шкідливого вмісту - навмисне чи навмисне.

    Корисність (отримання розумних даних) може бути досягнута тільки на стороні клієнта, Команда backend не може допомогти занадто багато з цим. Для досягнення безпеки, розробникам front-і backend необхідно працювати разом.

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

    Наприклад, цей посібник з безпеки PHP рекомендує перевірити все, що ми можемо на стороні клієнта. Вони підкреслюють важливість перевірки вхідних даних інтерфейсу, надаючи багато прикладів, таких як:

    "Перевірка вхідних даних найкраще працює з дуже обмеженими значеннями, наприклад, коли щось має бути цілим чи алфавітно-цифровим рядком або URL-адресою HTTP."

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

    Перевірка обмежень HTML5

    До HTML5, розробники фронтендів були обмежені перевірка вводу користувача за допомогою JavaScript, це був нудний і схильний до помилок процес. Щоб покращити перевірку форм на стороні клієнта, HTML5 ввів a перевірка обмежень алгоритм, який виконується в сучасних браузерах, і перевіряє достовірність поданих вхідних даних.

    Щоб зробити оцінку, алгоритм використовує атрибути вхідних елементів, пов'язані з перевіркою, як от ,

    The maxlength атрибут не повертає повідомлення про помилку, але браузер просто не дозволяє користувачам вводити більше, ніж вказаний номер символу. Тому дуже важливо інформувати користувачів про обмеження, інакше вони не зрозуміють, чому вони не можуть продовжувати друкувати.

    4. візерунок для перевірки Regex

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

    З візерунок атрибут, ми можемо зробити останнє - обмежувати користувачів подавати свої вхідні дані у форматі відповідає заданому регулярному виразу.

    The візерунок атрибут має багато випадків використання, але він може бути особливо корисним, коли ми хочемо перевірити поле пароля.

    Наведений нижче приклад вимагає, щоб користувачі ввели пароль довжиною не менше 8 символів і містили принаймні одну літеру та одне число (джерело використовуваного регулярного виразу).

     

    Ще кілька речей

    У цій статті ми розглянули, як використовувати перевірка форм, надана браузером наданий HTML5 нативним алгоритмом перевірки обмежень. Для створення власних сценаріїв перевірки потрібно використовувати API перевірки обмежень, який може бути наступним кроком у вдосконаленні навичок перевірки форми.

    Форми HTML5 доступні за допомогою допоміжних технологій, тому ми не обов'язково повинні використовувати aria-обов'язкова Атрибут ARIA для позначення необхідних полів введення для читання з екрану. Проте досі можна додати підтримку доступності для старих браузерів. Це також можливо відмовитися від перевірки обмежень шляхом додавання новалидат логічний атрибут до

    елемент.