Проверка ввода формы с использованием только HTML5 и Regex

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

Поскольку проверка важна, имеет смысл наличие инструментов и библиотек для проверки и очистки данных как на переднем, так и на внутреннем уровнях.

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

Элемент ввода формы

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

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

Обе эти проблемы можно легко решить, используя некоторые атрибуты HTML5 с элементами формы.

Атрибут типа

Атрибут type будет определять, какой тип ввода считается допустимым для данного элемента. Если для атрибута типа значение не указано, по умолчанию для типа устанавливается text . Это в основном означает, что все виды ввода текста будут считаться действительными для этого конкретного элемента.

Это хорошо, когда вы хотите, чтобы пользователи вводили свои имена. Однако, когда вы хотите, чтобы они вводили свой адрес электронной почты или номера, такие как их возраст и вес, гораздо лучше установить значение атрибута type на что-то подходящее.

Вот несколько значений, которые вы можете выбрать:

• email : это попросит пользователей ввести свой адрес электронной почты в допустимом формате. Например, они не могут просто написать myemail.com или что-то @ или @ кое-что . Им нужно будет ввести значение, аналогичное [email protected] . Конечно, они все еще могут вводить несуществующие электронные письма, но это другая проблема!
• number : это позволит убедиться, что только цифры считаются допустимыми ввода. Например, когда вы спрашиваете кого-то о его возрасте в форме, он не сможет предоставить данные в виде картофеля или тридцать шесть . Им нужно будет написать фактическое число, например, 36 или 15 .
• url : Вы можете установить атрибут type в url если хотите, чтобы пользователи вводили действительный URL-адрес в элемент ввода. Это предотвратит их вход в нечто вроде tutsplus . Однако tutsplus.com также будет считаться недействительным — пользователям придется ввести полный URL-адрес, например https://tutsplus.com .
• tel : использование этого значения не так полезно, как другие, потому что формат телефонного номера варьируется во всем мире. Нет просто никакого стандартного шаблона, который браузеры могли бы сопоставить с вводом, чтобы определить, является ли число действительным. Тем не менее, установка типа tel может быть полезна на более позднем этапе, когда вы делаете свою собственную пользовательскую проверку.

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

Следующая демонстрационная программа CodePen показывает, как мы можем использовать атрибут type для управления тем, что разрешено в различных полях ввода.

Атрибуты минимальной и максимальной длины

Еще один способ ограничить то, что считается допустимым входным элементом для элемента, — это использовать minlength и maxlength . Они устанавливают минимальное и максимальное количество символов, которые необходимо ввести в элемент ввода, чтобы сделать его действительным.

Правильные значения для обоих этих атрибутов будут варьироваться в зависимости от конкретного случая. Например, некоторые веб-сайты могут хотеть, чтобы имя пользователя было длиной от 4 до 15 символов, в то время как другие могут ограничивать максимальную длину до 12. Аналогично, люди в некоторых странах будут иметь необычно короткие или длинные имена по сравнению с другими.

Использование регулярных выражений для проверки формы

Установка значения атрибута type безусловно, помогает нам ограничить то, что считается допустимым вводом. Однако вы можете пойти еще дальше и указать шаблон, которому должны следовать имя пользователя или адрес электронной почты, чтобы считаться действительными.

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

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

Приведенный выше шаблон будет постоянно проверять, что все имена пользователей содержат только символы от az, AZ или 0-9. Например, monty42 , 42monty , MON42ty и mon42ty являются допустимыми именами пользователей в этом случае, но monty_42 недействителен.

minlength и maxlength гарантируют, что имя пользователя не будет слишком маленьким или слишком большим.

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

Теперь каждое имя пользователя, которое не начинается с _ и содержит какие-либо символы, кроме az, AZ или 0-9, после этого будет считаться недействительным.

Я надеюсь, что это поможет прояснить, как мы можем использовать атрибут pattern и некоторые регулярные выражения для ограничения того, что считается допустимым вводом, даже когда атрибут type установлен в text .

Расширенная проверка с помощью шаблонов регулярных выражений

Вы также можете использовать атрибут pattern вместе с другими типами элементов ввода, такими как email и url чтобы ограничить то, что считается допустимым. Например, допустим, вы хотите, чтобы пользователи вводили только URL-адрес, который является поддоменом tutsplus.com . Вы можете просто установить значение атрибута шаблона в https://.*\.tutsplus.com . Теперь любой ввод, такой как https://google.com или https://envato.com, будет считаться недействительным. Даже если вы используете URL-адрес tutsplus.com , начинающийся с https: // , это   будет недействительным, потому что URL должен начинаться с https: // .

То же самое можно сделать с электронными письмами. Если вы хотите, чтобы электронные письма заканчивались чем-то конкретным, вы можете просто использовать для этого атрибут pattern. Вот пример:

Если вышеуказанный элемент ввода используется в форме, пользователи смогут ввести только адрес электронной почты, который заканчивается на tutsplus.com или envato.com . Это означает, что [email protected] или [email protected] будут недействительными.

Ознакомьтесь с нашей таблицей JavaScript Regex, чтобы узнать больше примеров регулярных выражений и советов по их использованию.

• 
  Регулярные выражения
  Шпаргалка по регулярным выражениям JavaScript

Обязательные поля и заполнитель текста

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

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

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

Атрибут placeholder также имеет большое значение для того, чтобы сделать форму более удобной для пользователя. Например, если вы не дадите пользователям знать, что им нужно вводить URL-адреса, начинающиеся с https: // и являющиеся поддоменами tutsplus.com , они могут просто сдаться после неудачной записи поля URL-адреса с кодомthing.com или кодом .tutsplus.com .

В следующем примере мы использовали атрибуты pattern, required и placeholder для более детального управления проверкой и лучшего взаимодействия с пользователем.

Последние мысли

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

Наконец, мы узнали, как использовать атрибут placeholder чтобы убедиться, что формы, которые мы создаем, удобны для пользователя, и люди, заполняющие информацию, не расстраиваются, потому что они не знают формат ввода, который мы считаем допустимым.

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

• 
  JavaScript
  Лучшие JavaScript-формы 2019 года