От автора: к валидации входных данных следует отнестись серьезно. На сайт, который использует данные из форм без надлежащей проверки, не будет отправлено ничего, кроме мусора. Также есть вероятность, что хакеры смогут скомпрометировать личные данные пользователей, которые доверили вам свою информацию.
Поскольку валидация важна, имеет смысл в наличии инструментов и библиотек для проверки и очистки данных как на стороне клиента, так и на стороне сервера.
В этом руководстве мы сосредоточимся на использовании встроенных функций HTML5 для проверки данных различных типов полей ввода, не полагаясь на какие-либо внешние библиотеки. Очевидно, вам не следует останавливаться только на проверке на основе HTML5, но это было бы хорошим началом для повышения безопасности форм на веб-сайте.
Элемент ввода формы
Всякий раз, когда вы хотите получить какую-либо информацию от своих пользователей, вы, скорее всего, будете использовать элемент HTML input. Неважно, хотите ли вы узнать их имя, фамилию, адрес электронной почты, город, в котором они сейчас живут, номер телефона или их любимую спортивную команду. Элемент input является очень удобным способом получения информации от наших посетителей.
Однако некоторые злоумышленники имеют возможность воспользоваться тем фактом, что они могут ввести практически любую строку в элемент ввода и отправить форму. Точно так же могут быть пользователи, которые просто не знают, что они вводят данные в неправильном формате.
Обе эти проблемы можно очень легко решить, используя некоторые атрибуты HTML5 с элементами формы.
Тип атрибута
Атрибут type определяет, какой тип данных считается действительным для данного элемента. Если для атрибута type не указано значение, по умолчанию устанавливается тип text. Это в основном означает, что все виды текстовых полей будут считаться допустимыми для этого конкретного элемента.
Это нормально, если вы хотите, чтобы пользователи вводили свои имена. Однако, если вы хотите, чтобы они вводили адрес электронной почты или числа, такие как возраст и вес, гораздо лучше установить значение атрибута type на какое-то более подходящее.
Вот несколько значений, из которых вы можете выбрать:
email: просит пользователей ввести свой адрес электронной почты в допустимом формате. Например, они не могут просто написать myemail.com или что-то @ или @ something.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. Точно так же люди в некоторых странах будут иметь необычно короткие или длинные имена по сравнению с другими.
Использование Regex для валидации формы
Установка значения атрибута type, безусловно, помогает нам ограничить то, что проходит как допустимый ввод. Однако вы можете пойти еще дальше и указать шаблон, которому должно следовать имя пользователя или адрес электронной почты, чтобы считаться действительным.
Допустим, вы хотите убедиться, что имена пользователей состоят только из букв и цифр. Это легко сделать с помощью атрибута pattern. Вам просто нужно установить в его значение регулярное выражение, которое будет действовать как ориентир для определения того, какой ввод действителен, а какой нет.
Вот несколько примеров использования регулярного выражения с атрибутом pattern.
<input type="text" id="uname" name="uname" pattern="[a-zA-Z0-9]+" minlength="4" maxlength="10">
Приведенный выше шаблон будет проверять, что все имена пользователей содержат только символы от az, AZ или 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">
Теперь каждое имя пользователя, которое не начинается с _ и содержит какие-либо символы, кроме az, AZ или 0-9 после этого, будет считаться не валидным.
Я надеюсь, что это поможет прояснить, как мы можем использовать регулярные выражения, чтобы ограничить то, что считается допустимым вводом, даже если для атрибута type установлено значение text.
Расширенная проверка с использованием шаблонов регулярных выражений
Вы также можете использовать атрибут pattern вместе с другими типами элементов ввода, такими как email и url чтобы ограничить допустимые входные данные. Например, предположим, что вы хотите, чтобы пользователи вводили только URL-адрес, который является поддоменом tutsplus.com . Вы можете просто установить значение атрибута pattern равным https://.*\.tutsplus.com. Теперь любой ввод вроде https://google.com или https://envato.com будет считаться не валидным.
То же самое можно сделать и с электронной почтой. Если вы хотите, чтобы электронные адреса заканчивались чем-то конкретным, вы можете просто использовать для этого атрибут pattern. Вот пример:
<input type="email" id="email" pattern=".+@tutsplus\.com|.+@envato\.com">
Если указанный выше элемент ввода используется в форме, пользователи смогут вводить только адрес электронной почты, заканчивающийся на tutsplus.com или envato.com. Это означает, что [email protected] или [email protected] будут не валидными.
Ознакомьтесь с нашей шпаргалкой по регулярным выражениям JavaScript, чтобы получить больше примеров регулярных выражений и советов по их использованию.
Обязательные поля и placeholder
Хотя атрибуты 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>
Часто используемые регулярные выражения
Регулярное выражение для проверки имени пользователя
Имена пользователей представляют собой просто буквенно-цифровые строки, иногда с разрешенными “ – “ и “ _ “, в зависимости от целей создателей веб-сайта. Вы можете использовать следующее регулярное выражение, чтобы определить, должно ли имя пользователя состоять только из алфавитно — цифровых символов, “ – “ и “ _ “ : [a-zA-Z0-9-_]{4, 24}. Цифры в фигурных скобках ограничивают допустимое имя пользователя от 4 до 24 символов.
Вы можете использовать, [a-zA-Z][a-zA-Z0-9-_]{4,24} чтобы заставить пользователей использовать букву в качестве первого символа своего имени пользователя.
Регулярное выражение для проверки номеров телефонов
Телефонные номера обычно состоят из 10 цифр. Регулярное выражение для проверки того, ввел ли кто-то действительный номер телефона, может быть простым \d{10}.
Однако телефонные номера обычно делятся на три части: код города, код оператора и код абонента. И люди могут писать их в нескольких разных форматах, например:
123-456-7890 123 456 7890 123.456.7890 (123) 456 7890
Вы можете использовать \(?(\d{3})\)?[-\.\s]?(\d{3})[-\.\s]?(\d{4}) для сопоставления всех шаблонов телефонных номеров, указанных выше. Используя ? указывает браузеру искать 0 или 1 вхождение предыдущего символа. Цифры разделены на группы по 3 и 4 с помощью \d{3} и \d{4}.
Regex для проверки действительного адреса электронной почты
Адреса электронной почты обычно имеют вид [email protected]. Любой адрес электронной почты, соответствующий указанному выше шаблону, может быть сопоставлен с помощью (\w\.?)+@[\w\.-]+\.\w{2,4}.
Первоначально, домены верхнего уровня были 2 до 4 символов, но теперь они могут иметь гораздо больше символов, так что вы можете изменить часть проверки TLD , чтобы вместить всю новую длинную TLD со следующим регулярным выражением: (\w\.?)+@[\w\.-]+\.\w{2,}.
Регулярное выражение для проверки действительного URL
Вы можете использовать [(http(s)?):\/\/(www\.)?\w-/=#%&\.\?]{2,}\.[a-z]{2,}([\w-/=#%&\.\?]*)для сопоставления большинства действительных URL-адресов. Шаблоны регулярных выражений становятся все более и более сложными в зависимости от того, какую точность вы ищете в сопоставлении. В этом конкретном случае мы проверяем наличие необязательных http или www, а затем кучу других символов. Вышеупомянутое регулярное выражение также будет обрабатывать параметры запроса и фрагменты URL.
Заключение
В этом руководстве мы узнали, как добавить базовую валидацию в формы, просто используя HTML и регулярное выражение. Использование правильного значения атрибута type заставит пользователей вводить информацию в поле ввода в определенном формате. Использование регулярных выражений с атрибутом pattern может помочь нам сохранить допустимый ввод более ограниченным.
Наконец, мы узнали, как использовать атрибут placeholder, чтобы убедиться, что формы, которые мы создаем, удобны для пользователя, и люди, заполняющие информацию, не расстраиваются, потому что они не знают формат ввода, который мы считаем допустимым.
Автор: Monty Shokeen
Источник: code.tutsplus.com
Редакция: Команда webformyself.
Читайте нас в Telegram, VK, Яндекс.Дзен