02.08.2021

Валидация форм с использованием HTML5 и Regex

Валидация форм с внедрением HTML5 и Regex

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

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

В этом руководстве мы сосредоточимся на использовании интегрированных функций 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.

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

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

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

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

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

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

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

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

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

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

Неотклонимые поля и placeholder

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

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

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

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

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

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

Постоянное выражение для проверки имени пользователя

Имена юзеров представляют собой просто буквенно-цифровые строки, время от времени с разрешенными “ – “ и “ _ “, в зависимости от целей создателей сайта. Вы можете использовать следующее регулярное выражение, чтоб определить, должно ли имя пользователя состоять только из алфавитно — цифровых знаков, “ – “ и “ _ “ : [a-zA-Z0-9-_]{4, 24}. Цифры в фигурных скобках ограничивают допустимое имя юзера от 4 до 24 символов.

Вы сможете использовать, [a-zA-Z][a-zA-Z0-9-_]{4,24} чтоб заставить пользователей использовать букву в качестве первого знака своего имени пользователя.

Постоянное выражение для проверки номеров телефонов

Телефонные номера обычно состоят из 10 цифр. Постоянное выражение для проверки того, ввел ли кто-то действительный номер телефона, может быть обычным d{10}.

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

Вы сможете использовать (?(d{3}))?[-.s]?(d{3})[-.s]?(d{4}) для сравнения всех шаблонов телефонных номеров, указанных выше. Используя ? показывает браузеру искать 0 или 1 вхождение предшествующего символа. Цифры разделены на группы по 3 и 4 с помощью d{3} и d{4}.

Regex для проверки реального адреса электронной почты

Адреса электрической почты обычно имеют вид [email protected] Хоть какой адрес электронной почты, соответствующий указанному выше шаблону, может быть сопоставлен с помощью (w.?)[email protected][w.-]+.w{2,4}.

Сначало, домены верхнего уровня были 2 до 4 знаков, но теперь они могут иметь еще больше символов, так что вы сможете изменить часть проверки TLD , чтобы вместить всю новейшую длинную TLD со следующим регулярным выражением: (w.?)[email protected][w.-]+.w{2,}.

Постоянное выражение для проверки действительного URL

Вы сможете использовать [(http(s)?)://(www.)?w-/=#%&.?]{2,}.[a-z]{2,}([w-/=#%&.?]*)для сравнения большинства действительных URL-адресов. Шаблоны регулярных выражений становятся все более и более сложными в зависимости от того, какую точность вы ищете в сравнении. В этом конкретном случае мы проверяем наличие необязательных http либо www, а затем кучу других знаков. Вышеупомянутое регулярное выражение также будет обрабатывать характеристики запроса и фрагменты URL.

Заключение

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

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

По материалам webformyself.com

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

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