В этой статье мы рассмотрим поля формы HTML и параметры проверки, предлагаемые HTML5. Мы также рассмотрим, как их можно улучшить с помощью CSS и JavaScript.
Что такое проверка ограничений?
Каждое поле формы имеет назначение. И эта цель часто регулируется ограничениями — или правилами, определяющими, что следует и что не следует вводить в каждое поле формы. Например, для emailполя потребуется действительный адрес электронной почты; поле passwordможет требовать определенных типов символов и иметь минимальное количество необходимых символов; и текстовое поле может иметь ограничение на количество символов, которые можно ввести.
Современные браузеры имеют возможность проверять, соблюдаются ли эти ограничения пользователями, и предупреждать их о нарушении этих правил. Это называется проверкой ограничений.
Проверка на стороне клиента и на стороне сервера
Большая часть кода JavaScript, написанного в первые годы существования языка, обрабатывала проверку формы на стороне клиента. Даже сегодня разработчики тратят много времени на написание функций для проверки значений полей. Это все еще необходимо в современных браузерах? Вероятно, нет. В большинстве случаев это действительно зависит от того, что вы пытаетесь сделать.
Но сначала большое предупреждающее сообщение:
Проверка на стороне клиента — это тонкость, которая может предотвратить распространенные ошибки ввода данных, прежде чем приложение потратит время и пропускную способность, отправляя данные на сервер. Это не замена проверке на стороне сервера!
Всегда очищайте данные на стороне сервера. Не каждый запрос будет исходить из браузера. Даже если это так, нет гарантии, что браузер проверил данные. Любой, кто знает, как открыть инструменты разработчика браузера, может также обойти ваш любовно созданный HTML и JavaScript.