Проверка поля формы с помощью HTML (и немного Javascript)

Любовь - это здорово, но не как пароль. - Мэтт Мулленвег

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

Возьмите все важное поле электронная почта. Адреса электронной почты всегда должны иметь одинаковую структуру: [email protected]. Пример из реальной жизни: [email protected]. Поле формы электронной почты должно проверять, правильно ли пользователь ввел адрес электронной почты. В адресе электронной почты есть текст, за которым следует символ @, затем имя домена, точка (.) И, наконец, расширение. Это много, чтобы проверить.

Извечный вопрос: «Где мы проверяем правильность ввода: на стороне сервера или на стороне клиента?» Проверка на стороне сервера влечет за собой отправку пользователем формы на сервер, например ASP, C # или PHP, затем код сервера проверяет и возвращает ошибку, если обнаруживает ее. Это долгая и дорогостоящая поездка. Проверка на стороне клиента обычно означает: JavaScript перехватывает форму перед ее отправкой для проверки на наличие ошибок, возможно, с использованием регулярного выражения. Это экономит время на пути к серверу, но по-прежнему требует небольшого количества кода. Хотя мы все еще должны использовать проверку на стороне сервера, я собираюсь обсудить, как мы можем максимально использовать проверку на стороне клиента, чтобы уменьшить количество запросов к серверу.

HTML5 предоставил нам несколько <input> типов, таких как «число», «дата» и «электронная почта».

<input type="email" id="emailField">

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

/^[a-zA-Z0–9.!#$%&’*+\/=?^_`{|}~-]+@[a-zA-Z0–9](?:[a-zA-Z0–9-]{0,61} [a-zA-Z0–9])?(?:\.[a-zA-Z0–9](?:[a-zA-Z0–9-]{0,61}[a-zA-Z0–9])?)*$/

Источник: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email#Basic_validation

Используя тип электронной почты, мы можем проверить правильность поля формы с помощью функции javascript, называемой… checkValidity(). Эта функция возвращает значение истина | ложь. checkValidity() будет смотреть на тип ввода, а также на то, был ли установлен атрибут required и какой-либо тег pattern="".

<input type="email" id="emailField" required>

Поддержка checkValidity() работает для всех браузеров, включая IE10 и iOS. Https://caniuse.com/#feat=form-validation

const isValidEmail = emailField.checkValidity();

Мы можем проверить значения формы перед ее отправкой.

if ( isValidEmail ) {
  ...submit the form
} else {
  ...notify user
}

Проверка типа пользователя - это вопрос добавления нужного прослушивателя событий в поле ввода. Использование keyup дает немедленную обратную связь, когда пользователь вводит текст в само поле ввода.

emailField.addEventListener('keyup', function (event) {
  isValidEmail = emailField.checkValidity();
});

Мы также можем запретить пользователю отправлять форму до тех пор, пока текст не станет действительным. Добавление disabled в <button> предотвратит отправку, и после проверки действительности мы можем снова включить его. Отключенное состояние позволяет пользователям знать, что форму необходимо правильно заполнить, и предотвращает любые нежелательные отправления.

<button id="okButton" disabled>OK</button>

Проверяя действительность, мы можем изменить состояние кнопки с помощью .disabled = true|false:

if ( isEmailValid ) {
  okButton.disabled = false;
} else {
  okButton.disabled = true;
}

Собираем все вместе, это может выглядеть так:

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

Бонусная проверка - стили

Поля ввода имеют псевдоклассы css, доступные для визуального оповещения пользователей о том, что поле находится в состоянии ошибки: :valid и:invalid.

.email-field:valid {
  border-color: black;
}
.email-field:invalid {
  border-color: red;
}

В качестве дополнительного бонуса Chrome и Firefox будут отображать всплывающую подсказку об ошибке.

Джошуа Стадли - старший инженер по интерфейсу в Kelley Blue Book. Он имеет более чем 15-летний опыт веб-разработки интерфейсов и работал с ведущими интерактивными компаниями в различных областях, от медицинского программного обеспечения до автомобильных СМИ. Джош также преподает полноценную веб-разработку на UCI Coding Bootcamp. Когда Джош не создает веб-сайты, он создает веб-сайты. Шутки в сторону.