Введение в проверку ограничений HTML5

Интерактивные веб-сайты и приложения невозможно представить без форм, которые позволяют нам соединяться с нашими пользователями и получать необходимые нам данные для обеспечения бесперебойной работы с ними. Нам действительно нужен действительный пользовательский ввод, однако нам нужно приобретать его таким образом, чтобы он не слишком расстраивал наших пользователей.

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

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

В этом посте мы сосредоточимся на проверке ограничений, предоставляемых браузером, и рассмотрим, как разработчики веб-интерфейса могут обеспечить надежный ввод данных пользователем с помощью HTML5.

Читайте также: 4 UX Design Form UX, которые вы должны знать (с примерами)

Зачем нам нужна проверка входных данных
Проверка ввода имеет две основные цели. Контент, который мы получаем, должен быть:
1. Полезно
Нам нужны полезные данные, с которыми мы можем работать. Мы должны заставить людей вводить реалистичные данные в правильном формате. Например, никто, кто жив сегодня, не родился 200 лет назад. На первый взгляд получение таких данных может показаться смешным, но в долгосрочной перспективе это раздражает и наполняет нашу базу данных бесполезными данными.
2. Безопасный
Когда речь идет о безопасности, это означает, что мы должны предотвратить внедрение вредоносного контента – преднамеренного или случайного.

Полезность (получение разумных данных) может быть достигнута только на стороне клиента, бэкэнд-команда не может помочь в этом. Чтобы обеспечить безопасность, разработчики как переднего, так и внутреннего интерфейса должны работать вместе.

Если разработчики веб-интерфейса правильно проверяют входные данные на стороне клиента, бэкэнд-команде придется иметь дело с гораздо меньшим количеством уязвимостей. Взлом (сайт) часто влечет за собой предоставление дополнительных данных или данных в неправильном формате. Разработчики могут бороться с дырами в безопасности, такими как эти, успешно сражаться с внешнего интерфейса.

Например, это руководство по безопасности PHP рекомендует проверить все, что мы можем на стороне клиента. Они подчеркивают важность проверки входных данных внешнего интерфейса, приводя множество примеров, таких как:

«Проверка ввода лучше всего работает с чрезвычайно ограниченными значениями, например, когда что-то должно быть целым числом, или буквенно-цифровой строкой, или URL-адресом HTTP».

В проверке входных данных в интерфейсе наша работа заключается в том, чтобы наложить разумные ограничения на ввод данных пользователем. Функция проверки ограничений в HTML5 предоставляет нам средства для этого.

Читайте также: Учебное пособие по HTML5: Страница входа с формами HTML5

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

Чтобы выполнить оценку, алгоритм использует связанные с проверкой атрибуты входных элементов, такие как ,

Атрибут maxlength не возвращает сообщение об ошибке, но браузер просто не позволяет пользователям печатать больше, чем указанный номер символа. Вот почему так важно информировать пользователей об ограничениях, иначе они не поймут, почему они не могут продолжать печатать.
4. шаблон для проверки Regex
Атрибут pattern позволяет нам использовать Регулярные выражения в нашем процессе проверки ввода. Регулярное выражение – это заранее определенный набор символов, которые образуют определенный шаблон. Мы можем использовать его либо для поиска строк, которые следуют шаблону, либо для принудительного применения определенного формата, определенного шаблоном.

С помощью атрибута pattern мы можем сделать последнее – ограничить пользователей в отправке их входных данных в формате, который соответствует заданному регулярному выражению.

Рекомендуемое чтение: Руководство для начинающих по регулярным выражениям (Regex)

Атрибут pattern имеет много вариантов использования, но он может быть особенно полезен, когда мы хотим проверить поле пароля.

В приведенном ниже примере требуется, чтобы пользователи вводили пароль длиной не менее 8 символов и содержали как минимум одну букву и одну цифру (источник регулярного выражения, которое я использовал).




Еще несколько вещей
В этой статье мы рассмотрели, как использовать предоставляемую браузером проверку форм, предоставляемую собственным алгоритмом проверки ограничений HTML5. Для создания наших пользовательских сценариев проверки нам нужно использовать API проверки ограничений это может быть следующим шагом в совершенствовании навыков проверки формы.

HTML5 формы доступны с помощью вспомогательных технологийпоэтому нам не обязательно использовать ария-требуется Атрибут ARIA для пометки обязательных полей ввода для программ чтения с экрана. Однако все еще может быть полезно добавить поддержку специальных возможностей для старых браузеров. Также можно отказаться от проверки ограничений, добавив NOVALIDATE логический атрибут к

<

form> элемент.

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *