[recovery mode] Валидация в HTML5
Введение
Интерактивные веб-сайты и приложения невозможно представить без форм, которые позволяют нам общаться с нашими пользователями и получать данные, необходимые для обеспечения гладких сделок с ними. В то время как мы можем улучшить удобство и простоту использования наших форм с удачно выбранным шаблоном проектирования UX. HTML5 также имеет собственный механизм для ограничения проверки, который позволяет нам поймать ошибки ввода прямо на фронт энде.
Проверка ввода имеет основную цель — безопасность. Когда речь идет о безопасности, это означает, что мы должны предотвратить инъекции вредоносного контента — будь то преднамеренные или случайные.При проверке внешнего интерфейса ввода, наша работа состоит в том, чтобы установить разумные ограничения на ввод данных пользователем.
Валидация в 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) required
Required является самым известным атрибутом в валидации HTML. У него не может быть значения. Просто теги, которые использует этот атрибут, не должны быть пустыми.
Он может быть использован в следующих инпутах: 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.
Maxlength не покажет ошибку, но браузер не позволит пользователю ввести больше указанного числа символов. Хорошим примером может быть тег tel — pole для телефонного номера, который не может иметь больше определенного количества символов, или формы обратной связи, где мы не хотим, чтобы пользователи писали сообщения больше определенной длины.
3) max, min
Атрибут min и max могут помочь указывать диапазон между минимальном и максимальном номером. Мы можем использовать эти атрибуты в следующих инпутах: date, time, week, range, number и month. В следующем примере мы можем видеть минимальную и максимальную разницу в возрасте от 18 до 65 лет.
Если пользователь введет возраст до 17 лет или после 66 лет, то он получит сообщение об ошибке, при том что этот запрос не будет отправлен на сервер.
4) step
Атрибут step можно использовать для числового интервала. В следующем примере есть input number где мы указываем минимальный и максимальный год, но мы добавляем step=»4». Это означает, что при каждом изменении значение будет меняться с шагом 4 года.
Пользователь может также ввести значение вручную в поле ввода, но в этом случае, если оно не соответствует ограничениям, браузер выдаст сообщение об ошибке.
5) pattern
Атрибут паттерн использует регулярное выражение для валидаций этого поля. Регулярное выражение представляет собой заранее определенный набор символов, которые образуют определенный шаблон. Мы можем использовать его либо для поиска строк, которые следуют шаблону, либо для обеспечения определенного формата, определенного шаблона.
Приведенный ниже пример требует от пользователей ввести пароль, который содержит минимально 8 символов, и включает по крайней мере одну букву и одну цифру:
Заключение
В этой статье мы рассмотрели то, как использовать предоставляемый браузером алгоритм проверки форм и ограничений в HTML5. Обычно мы можем это делать с помощью JavaScript или PHP, но для начала, чтобы оптимизировать обращение к базе данных или посторонним скриптам, мы можем использовать HTML5.
Комментарии (3)
21 октября 2016 в 10:17
+1↑
↓
Проверка ввода имеет основную цель — безопасность
В корне не согласен. Проверка форм преследует только одну цель — помочь пользователю правильно ее заполнить. Злодей всегда сможет сформировать запрос в сторонней утилите и обойти механизмы проверки. Так что валидацию на стороне сервера никто не отменяет, даже при использовании форм HTML5
21 октября 2016 в 10:27 (комментарий был изменён)
0↑
↓
На мой взгляд, стоит добавить, что HTML5 предоставляет относительно удобный способ кастомной валидации в JS, задействующий те же механизмы, что и перечисленные в статье аттрибуты. Достаточно вызвать для нужного вам поля field.setCustomValidity (text)
При этом, если text пустой, то считается, что элемент валидный, в противном случае — невалидный и переданный текст отображается как ошибка валидации.Также стоит отметить возможность использования css псевдо-классов : valid и : invalid при использовании стандартной HTML5 валидации.
пс полностью согласен с предыдущим комментарием насчет безопасности — проверка ввода это удобство пользователя, а не защита собственного сервиса.
ппс когда я использовал аттрибут required, он засчитывал наличие любых символов (в т.ч. пробелов). Поэтому писал собственную проверку с использованием trim. Если кто-то подскажет, если это как-то настраиваемо, буду благодарен
OtshelnikFm
21 октября 2016 в 10:37
0↑
↓
Мало того, что именно таких статей в интернете пруд пруди, так еще и не сказали что Обязательно! надо проверять все входящие данные повторно на сервере. Иначе качаем старый браузер — и не заполняем обязательные поля и обходим все паттерны для ввода (или в современном браузере, в режиме вебинспектора — сами меняем паттерны — и на сервер данные нужные нам шлем).Как написал первый комментатор — это лишь для удобства пользователя. Законопослушного. Для злодея — это огромная дыра.
