При создании веб-приложений важно серьезно относиться к безопасности, особенно, когда приходится иметь дело с получением данных от пользователей. Общее правило безопасности - не доверять никому, так что нельзя надеяться на то, что пользователи всегда будут вводить в формы правильные значения. Например, вместо ввода в поле правильного email-адреса, пользователь может ввести неверный адрес, или вообще какие-нибудь вредоносные данные. Когда дело доходит до валидации пользовательских данных, ее можно проводить как на стороне клиента (в веб-браузере), так и на серверной стороне.2 Ранее валидацию на стороне клиента можно было провести только с помощью JavaScript. Но все изменилось (или почти изменилось), так как с помощью HTML5 валидацию можно проводить средствами браузера, без необходимости писать сложные скрипты для валидации на JavaScript. Валидация форм с помощью HTML5 HTML5 предоставляет довольно надежный механизм, основанный на следующих атрибутах тега <input />: type, patternи require. Благодаря этим новым атрибутам вы можете переложить некоторые функции проверки данных на плечи браузера.1 Давайте рассмотрим эти атрибуты, чтобы понять, как они могут помочь в валидации форм. Атрибут type Этот атрибут говорит, какое поле ввода отобразить для обработки данных, например, уже знакомое поле типа <input type="text" /> Некоторые поля ввода уже предоставляют стандартные способы валидации, без необходимости писать дополнительный код. Например, <input type="email" /> проверяет поле на то, что введенное значение соответствует шаблону правильного email адреса. Если в поле введен неверный символ, форму нельзя будет отправить, пока значение не будет исправлено. Попробуйте поиграться со значениями поля email в нижеприведенной демонстрации. Также существуют другие стандартные типы полей, вроде <input type="number" />, <input type="url" /> и <input type="tel" /> для валидации чисел, URL’ов и телефонных номеров соотвествено. Замечание: формат телефонного номера различается для разных стран из-за несоответствия количества цифр в телефонных номерах и разности форматов. Как результат, спецификация не определяет алгоритм проверки телефонных номеров, так что на время написания статьи данная возможность слабо поддерживается браузерами. К счастью для нас, валидацию телефонных номеров можно провести с использованием атрибута pattern, который принимает как аргумент регулярное выражение, который мы рассмотрим далее. Атрибут pattern Атрибут pattern, скорее всего, заставит многих фронтенд-разработчиков прыгать от радости. Этот атрибут принимает регулярное выражение (аналогичное формату регулярных выражений JavaScript), по которому будет проверяться корректность введенных в поле данных. Регулярные выражения это язык, использующийся для разбора и манипуляции текстом. Они часто используются для сложных операций поиска и замены, а также для проверки корректности введенных данных. На сегодняшний день регулярные выражения включены в большинство популярных языков программирования, а также во многие скриптовые языки, редакторы, приложения, базы данных, и утилиты командной строки. Регулярные выражения (RegEX) являются мощным, кратким и гибким инструментом для сопоставления строки текста, вроде отдельных символов, слов или шаблонов символов. Передав регулярное выражение в качестве значения атрибута pattern можно указать, какие значения приемлемы для данного поля ввода, а также проинформировав пользователя об ошибках. Давайте посмотрим на пару примеров использования регулярных выражений для валидации значения полей ввода. Телефонные номера Как упоминалось ранее, тип поля tel не полностью поддерживается браузерами из-за несоответствия форматов номеров телефонов в разных странах. Например, в некоторых странах формат телефонных номеров представляется в виде xxxx-xxx-xxxx, и сам телефонный номер будет что-то вроде этого: 0803-555-8205. Регулярное выражение, которому соответствует данный шаблон, такое: ^\d{4}-\d{3}-\d{4}$. В коде это можно записатьтак: <label for="phonenum">Phone Number:</label> <input type="tel" pattern="^\d{4}-\d{3}-\d{4}$" > Буквенно-цифровые значения Следующий шаблон соответствует набору буквенно-цифровых значений (комбинации букв английского алфавита и цифр): <input type="text" pattern="[a-zA-Z0-9]+" > Имя пользователя в Twitter Данное регулярное выражение соответствует имени пользователя в твиттере, с предваряющим символом @, например@tech4sky: <input type="text" pattern="^@[A-Za-z0-9_]{1,15}$" > Цвет в шестнадцатеричном виде Эта регулярка соответствует цвету в шестнадцатеричном виде, например #3b5998 или #000: <input type="text" pattern="^#+([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$" > Подсказки Для того, чтобы дать пользователю подсказку о шаблоне, или сообщить об ошибке в случае неверно введенного в поле значения, можно использовать атрибут title: <input type="text" name="ssn" pattern="^\d{3}-\d{2}-\d{4}$" title="Номер Социального Страхования" /> Если вы еще не знакомы с регулярными выражениями, вы можете ознакомиться с этим документом. В большинстве случаев вы всегда можете воспользоваться гуглом для поиска нужных вам регулярных выражений, или же использоватьвспомогательные инструменты. Атрибут required Это атрибут булевого типа, использующийся для указания того, что значение данного поле обязательно заполнить для того, чтобы отправить форму. При добавлении этого атрибута полю браузер потребует от пользователя заполнить данное поле перед отправкой формы. Это избавляет нас от реализации проверки полей с помощью JavaScript, что может сохранить немного времени разработчикам. Например: <input type="text" name="my_name" required /> или <input type="text" name="my_name" required="required" />(для совместимости с XHTML) Во всех демках, которые вы видели выше, используют атрибут required, так что вы можете попробовать его в действии, попытавшись отослать форму без заполнения полей. Заключение Поддержка валидации форм браузерами довольно хороша, а для старых браузеров вы можете использовать полифиллы. Стоит отметить, что надеяться на валидацию только на стороне браузера опасно, так как эти проверки могут быть легко обойдены злоумышленниками или ботами. Не все браузеры поддерживают HTML5, и не все данные, посланные вашему скрипту, придут с вашей формы. Это значит, что перед тем, как окончательно принять данные от пользователя, необходимо проверить их корректность на стороне сервера.