От автора: валидация ввода формы в HTML5 — это то, к чему следует относиться серьезно. Без надлежащей валидации, если повезет, вы получите только много ненужных и несоответствующих вводимых данных. Однако существует также вероятность того, что хакеры смогут заполучить личные данные пользователей, которые доверили вам свою информацию.
Поскольку валидация важна, имеет смысл использовать инструменты и библиотек для проверки и очистки данных как для front-end, так и для back-end.
В этом руководстве основное внимание будет уделено использованию встроенных функций HTML5 для проверки различных типов ввода без каких-либо внешних библиотек. Очевидно, что вам не следует останавливаться только на проверке на основе HTML5, но это было бы хорошим началом для повышения безопасности форм на вашем веб-сайте.
Элемент ввода формы
Всякий раз, когда вы хотите получить какую-то информацию от своих пользователей, вы, скорее всего, будете использовать HTML-элемент input. Неважно, хотите ли вы получить имя пользователя, его фамилию, адрес электронной почты, город, в котором они в настоящее время живут, номер телефона или любимую спортивную команду. Элемент input является очень удобным способом получения информации от посетителей.
Тем не менее, некоторые злоумышленники хотели бы воспользоваться тем, что они могут вводить в элемент ввода и отправлять через форму практически любую строку. Точно так же могут быть пользователи, которые просто не знали, что вводят данные в неправильном формате.
Обе эти проблемы можно легко решить, используя с элементами формы некоторые атрибуты HTML5.
Атрибут type
Атрибут type определяет, какой тип ввода считается действительным для данного элемента. Если для атрибута type не указано значение, по умолчанию устанавливается тип text. Это в основном означает, что все виды вводимого текста будут считаться действительными для этого конкретного элемента.
Это полезно, когда вы хотите, чтобы пользователи вводили свои имена. Однако, когда вы хотите, чтобы они ввели адрес электронной почты или числа, такие как их возраст и вес, гораздо лучше установить для атрибута type что-то подходящее. Вот несколько значений, которые вы можете выбрать:
email: Пользователю будет предложено ввести адрес электронной почты в корректном формате. Например, они не могут просто написать myemail.com или что-то@ или @кое-что. Им нужно будет ввести значение, аналогичное [email protected]. Конечно, они все равно могут вводить несуществующие адреса электронной почты, но это другая проблема!
number: Позволяет обеспечить, чтобы допустимыми являлись только цифры. Например, когда вы в форме спрашиваете кого-то о его возрасте, он не сможет предоставить данные в формате «картофель» или «тридцать шесть». Ему нужно будет написать фактическое число, например, 36 или 15.
url: Вы можете установить для атрибута type url, чтобы пользователи вводили действительный URL-адрес. В этом случае они не смогут ввести что-то вроде tutsplus. Кроме того, tutsplus.com также будет считаться недействительным — пользователям необходимо будет ввести полный URL-адрес, например https://tutsplus.com.
tel: Использование этого значения не так полезно, как другие, потому что формат телефонного номера варьируется во всем мире. Просто нет стандартного шаблона, который браузеры могли бы сопоставить с элементом ввода, чтобы определить, является ли число действительным. Тем не менее, установка типа tel может быть полезна на более позднем этапе, когда вы выполняете собственную пользовательскую валидацию.
Существует много других значений атрибута type, которые можно использовать для указания типа ввода, действительного для определенного элемента. Вы можете прочитать обо всех этих значениях на странице документации MDN по элементам ввода.
Следующая демо-версия на CodePen показывает, как мы можем использовать атрибут type для управления тем, что разрешено для различных полей ввода.
Атрибуты минимальной и максимальной длины
Еще один способ ограничить то, что является валидным вводом для элемента — использовать атрибуты minlength и maxlength. Они устанавливают минимальное и максимальное количество символов, которые необходимо ввести в элемент ввода, чтобы сделать его действительным.
Необходимое значения для обоих этих атрибутов будут варьироваться в зависимости от конкретного случая. Например, некоторые веб-сайты могут требовать, чтобы имя пользователя было длиной от 4 до 15 символов, в то время как другие могут ограничивать максимальную длину до 12 символов. Аналогично, люди в некоторых странах будут иметь необычно короткие или длинные имена по сравнению с другими.
Использование регулярных выражений для валидации формы
Установка значения атрибута type, безусловно, помогает ограничить то, что считается допустимым вводом. Однако вы можете пойти еще дальше и указать шаблон, которому должны следовать имя пользователя или адрес электронной почты, чтобы считаться действительными.
Допустим, вы хотите убедиться, что имена пользователей — это только буквенно-цифровые значения. Это можно легко реализовать с помощью атрибута pattern. Вам просто нужно установить для него регулярное выражение, которое будет действовать как ориентир, чтобы определить, какие входные данные будут действительными, а какие нет.
Вот несколько примеров использования регулярных выражений с атрибутом pattern.
<input type="text" id="uname" name="uname" pattern="[a-zA-Z0-9]+" minlength="4" maxlength="10">
Приведенный выше шаблон будет проверять, чтобы все имена пользователей содержали только символы от a до z, от A до Z или от 0 до 9. Например, monty42, 42monty, MON42ty и mon42ty являются допустимыми именами пользователей, а monty_42 — нет.
Атрибуты minlength и maxlength помогут убедиться, что имя пользователя не является слишком коротким или слишком длинным.
Если вы хотите, чтобы имя пользователя начиналось с определенного символа, например подчеркивания, вы можете просто добавить его в начало шаблона.
<input type="text" id="uname" name="uname" pattern="_[a-zA-Z0-9]+" minlength="4" maxlength="10">
Теперь каждое имя пользователя, которое не начинается с _ и содержит какие-либо символы, кроме a-z, A-Z или 0-9, будет считаться недействительным.
Я надеюсь, теперь вы понимаете, как мы можем использовать атрибут pattern и регулярные выражения, чтобы ограничить то, что считается допустимым вводом, даже когда для атрибута type установлено значение text.
Расширенная валидация с помощью шаблонов регулярных выражений
Вы также можете использовать атрибут pattern вместе с другими типами элементов ввода, такими как email и url, чтобы ограничить то, что считается допустимым. Например, вы хотите, чтобы пользователи вводили только URL-адрес, который является поддоменом tutsplus.com. Вы можете просто установить для атрибута pattern значение https://.*\.tutsplus.com. Теперь любой ввод, такой как https://google.com или https://envato.com, будет считаться недействительным. Даже если вы используете URL-адрес tutsplus.com, начинающийся с http://, он будет недействительным, поскольку предполагается, что URL-адрес должен начинаться с https: //.
То же самое можно сделать с адресами электронной почты. Если вы хотите, чтобы они заканчивались чем-то конкретным, вы можете просто использовать для этого атрибут pattern. Например:
<input type="email" id="email" pattern=".+@tutsplus\.com|.+@envato\.com">
Если в форме используется вышеуказанный элемент ввода, пользователи смогут ввести только адрес электронной почты, который заканчивается на tutsplus.com или envato.com. Это означает, что [email protected] или [email protected] будут недействительными.
Обязательные поля и заполнитель текста
Хотя атрибуты required и placeholder не обязательно связаны с валидацией, они могут быть использованы для улучшения пользовательского опыта, когда кто — то заполняет форму.
Не каждый готов поделиться своей информацией. Если форма содержит десять различных полей ввода, но для того, что вы хотите сделать, требуется всего пять или шесть, а остальные предназначены для дополнительной информации, то рекомендуется сообщить об этом пользователям.
Вы можете пометить определенные поля ввода как обязательные, используя атрибут required. Это позволит пользователям знать, какая минимальная информация абсолютно необходима, и они должны предоставить ее при заполнении формы. Это также может увеличить количество людей, которые заполняют форму, потому что они будут знать заранее, что заполнение всех полей не является абсолютно необходимым.
Атрибут placeholder также весьма полезен, когда речь идет об удобстве формы. Например, если вы не укажете пользователям, что им нужно вводить URL-адреса, начинающиеся с https: // и являющиеся поддоменами tutsplus.com, они могут просто сдаться после неудачной попытки ввести в поде URL-адреса something.com или code.tutsplus.com.
В следующем примере мы использовали атрибуты pattern, required и placeholder для большего контроля над валидацией и улучшения взаимодействия с пользователем.
<form> <label for="name">Name: *</label> <input type="text" id="name" name="name" pattern="[a-zA-Z]+" placeholder="Monty" required> <br> <label for="name">Company Email Address: *</label> <input type="email" id="email" name="email" placeholder="[email protected]" pattern=".+@company\.com" required> <br> <label for="name">Age: </label> <input type="number" id="age" name="age" min="10" max="80" placeholder="30"> <br> <label for="name">Favorite Tuts+ Website: *</label> <input type="url" id="website" name="website" pattern="https://.*\.tutsplus\.com" placeholder="https://code.tutsplus.com" required> </form>
Заключение
В этом руководстве мы узнали, как добавить базовую валидацию для форм, просто используя HTML и регулярные выражения. Использование правильного значения для атрибута type позволяет обеспечить, чтобы пользователи вводили информацию в поле ввода в определенном формате. Использование регулярных выражений с атрибутом pattern может помочь нам ограничить допустимый ввод.
Наконец, мы узнали, как использовать атрибут placeholder, чтобы обеспечить удобство форм, которые мы создаем, и чтобы люди, заполняющие информацию, не расстраивались, потому что они не знают формат ввода, который мы считаем допустимым.
Автор: Monty Shokeen
Источник: https://code.tutsplus.com
Редакция: Команда webformyself.