Статьи

Использование HTML5 Constraint API для проверки формы

Октябрь 31, 2018

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

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

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

Проверка основных ограничений

Базовая проверка может быть выполнена путем выбора наиболее подходящих значений для атрибута type Например, вы можете проверить электронную почту, написав следующий HTML: 

 <input type=”email” />		//The field value must be an email

Вы можете проверить URL, написав следующую разметку: 

 <input type=”URL” />			// The field value must be a URL

Используя emailurltype Браузер также отображает сообщение об ошибке очень удобным способом, если возникают какие-либо ошибки проверки.

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

  1. pattern : атрибут pattern используется для указания регулярного выражения, и значение поля должно соответствовать этому шаблону. Этот атрибут может использоваться с такими типами ввода, как textpasswordemailurltelsearch
    Например, в следующем фрагменте HTML используется атрибут pattern 

     <input type=”text” pattern=”[1-4]{5}” />

    Когда форма отправлена, проверка выполняется в поле ввода. В результате значение, такое как ABCD, в этом случае не пройдет проверку.

  2. required : required 
     <input type=”text” required />

    Приведенный выше фрагмент использует required Если вы оставите поле пустым и попытаетесь отправить форму, произойдет ошибка проверки.

  3. maxlength : это целочисленное значение, которое определяет максимальное количество символов, допустимое для определенного поля ввода. 
     <input type=”text” maxlength=”20” />

    Приведенный выше фрагмент добавляет верхний предел в поле ввода. Значение, введенное в этот элемент ввода, должно быть длиной менее 20 символов.

  4. min & max : как видно из названий, атрибуты minmax

Обработка сложных ограничений

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

Во-первых, нам нужно прикрепить слушатель onchange Следующий фрагмент показывает форму HTML. 

 <form name="ValidationForm">
	Password: <input type="password" id="password1"/>
	Confirm Password:<input type="password" id="password2"/>
	<input type="submit" value="submit"/>
</form>

Поскольку не будет никакого события submit Вот почему мы заинтересованы в событии change Всякий раз, когда происходит событие change Если да, мы вызываем setCustomValidity()

Это означает, что поле пароля помечено как действительное и, следовательно, при отправке формы не будет ошибки проверки. С другой стороны, если мы обнаруживаем, что пароли не совпадают в событии changesetCustomValidity() Это означает, что поле пароля будет помечено как недействительное, и сообщение об ошибке будет отображаться, когда пользователь отправляет форму.

Следующий JavaScript реализует эту логику: 

 <script type="text/javascript">
window.onload = function () {
	document.getElementById("password1").onchange = validatePassword;
	document.getElementById("password2").onchange = validatePassword;
}
function validatePassword(){
var pass2=document.getElementById("password2").value;
var pass1=document.getElementById("password1").value;
if(pass1!=pass2)
	document.getElementById("password2").setCustomValidity("Passwords Don't Match");
else
	document.getElementById("password2").setCustomValidity('');	 
//empty string means no validation error
}
</script>

Лучшая часть использования вышеуказанного подхода заключается в том, что вам не нужно беспокоиться о том, как представить сообщение об ошибке пользователю. Вам просто нужно вызвать простой метод — setCustomValidity()

Вывод

Вы можете реализовать множество простых и расширенных ограничений, используя API проверки ограничений HTML5.

API предлагает огромный набор инструментов для настройки процесса проверки. Мы только что обсудили часть API.

Чтобы узнать о более продвинутых концепциях, таких как CSS-хуки, состояния достоверности, ознакомьтесь с этим руководством в Mozilla

35
Share: