Главная страница   /   14.2. Использование валидации входных данных (Руководство по HTML5

Руководство по HTML5

Руководство по HTML5

Адам Фриман

14.2. Использование валидации входных данных

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

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

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

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

Внимание

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

Проверка входных данных осуществляется при помощи атрибутов. В таблице 14-7 показано, какие элементы (и типы input) поддерживают атрибуты валидации.

Таблица 14-7: Поддержка валидации входных данных
Атрибут валидации Элементы
required textarea, select, input (типы text, password, checkbox, radio, file, datetime, datetime-local, date, month, time, week, number, email, url, search и tel)
min, max input (типы datetime, datetime-local, date, month, time, week, number и range)
pattern input (типы text, password, email, url, search и tel)

Давайте убедимся, что пользователь ввел значение

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

Листинг 14-6: Использование атрибута required
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<meta name="author" content="Adam Freeman" />
	<meta name="description" content="A simple example" />
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
	<form method="post" action="http://titan:8080/form">
		<input type="hidden" name="recordID" value="1234" />
		<p>
			<label for="name">
				Name:
				<input type="text" required id="name" name="name" />
			</label>
		</p>
		<p>
			<label for="password">
				Password:
				<input type="password" required
					placeholder="Min 6 characters" id="password" name="password" />
			</label>
		</p>
		<p>
			<label for="accept">
				<input type="checkbox" required id="accept" name="accept" />
				Accept Terms & Conditions
			</label>
		</p>
		<input type="submit" value="Submit" />
	</form>
</body>
</html>

В листинге 14-6 я применил атрибут required для трех типов элемента input. Пользователь не сможет отправить форму, пока не предоставит для всех них значения. Для типов text и password это обозначает, что пользователь должен ввести текст в текстовое поле, а для типа checkbox – должен выбрать хотя бы одно значение.

Совет

Начальное значение, установленное с помощью атрибута value, удовлетворяет атрибут валидации required. Если вы хотите обязать пользователя самого ввести значение, лучше используйте атрибут placeholder. Информацию об атрибутах value и placeholder можно найти в главе 12.

Разные браузеры, которые поддерживают валидацию входных данных, делают это немного по-разному, но результат во многом схож: когда пользователь нажимает на кнопку, чтобы отправить форму, первый элемент, который имеет атрибут required и куда не было введено значение, выделяется для пользователя. Затем пользователь может исправить данное упущение и снова отправить форму. Если есть другие ошибки, тогда выделяется следующий элемент. Этот процесс продолжается, пока пользователь не предоставит значения для всех элементов с атрибутом required. На рисунке 14-6 показано, как Google Chrome привлекает внимание пользователя к элементу, с которым возникла проблема.

Рисунок 14-6: Google Chrome привлекает внимание пользователя к полю с обязательным заполнением

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

Давайте убедимся, что значение находится в заданных рамках

Мы можем использовать атрибуты min и max, чтобы убедиться, что числовые значения и даты находятся в пределах определенного диапазона. В листинге 14-7 показаны эти атрибуты, применяемые к типу number элемента input.

Листинг 14-7: Использование атрибутов min и max
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<meta name="author" content="Adam Freeman" />
	<meta name="description" content="A simple example" />
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
	<form method="post" action="http://titan:8080/form">
		<input type="hidden" name="recordID" value="1234" />
		<p>
			<label for="name">
				Name:
				<input type="text" id="name" name="name" />
			</label>
		</p>
		<p>
			<label for="password">
				Password:
				<input type="password"
					placeholder="Min 6 characters" id="password" name="password" />
			</label>
		</p>
		<p>
			<label for="price">
				$ per unit in your area:
				<input type="number" min="0" max="100"
					value="1" id="price" name="price" />
			</label>
		</p>
		<input type="submit" value="Submit" />
	</form>
</body>
</html>

Оба атрибута применять не обязательно. Для создания верхнего предела для значения применяется только атрибут max, а нижнего предела – только атрибут min. При применении обоих атрибутов мы создаем диапазон значений с верхним и нижним ограничениями. Значения min и max являются «включительными», то есть если вы укажете максимальное значение 100, то допускается любое значение до и включая 100.

Вы можете увидеть, как браузер сообщает об ошибке валидации заданного диапазона значений, на рисунке 14-7.

Рисунок 14-7: Ошибка валидации диапазона значений

Совет

Атрибуты min и max проводят валидацию только тогда, когда пользователь ввел какое-либо значение. Браузер позволит пользователю отправить форму, даже если текстовое поле будет пустым. По этой причине атрибуты mix и max часто используются в связке с атрибутом required, описанном в предыдущем разделе.

Давайте убедимся, что значение соответствует шаблону

Атрибут pattern гарантирует, что значение соответствует регулярному выражению. В листинге 14-8 показано, как используется атрибут pattern.

Листинг 14-8: Использование атрибута pattern
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<meta name="author" content="Adam Freeman" />
	<meta name="description" content="A simple example" />
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
	<form method="post" action="http://titan:8080/form">
		<input type="hidden" name="recordID" value="1234" />
		<p>
			<label for="name">
				Name:
				<input type="text" id="name" name="name" pattern="^.* .*$" />
			</label>
		</p>
		<p>
			<label for="password">
				Password:
				<input type="password"
					placeholder="Min 6 characters" id="password" name="password" />
			</label>
		</p>
		<input type="submit" value="Submit" />
	</form>
</body>
</html>

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

Рисунок 14-8: Ошибка валидации регулярных выражений

Совет

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

Давайте убедимся, что значением является имейл адрес или URL

Типы элемента input email и url, которые я описал в главе 13, гарантируют то, что пользователь ввел действительный адрес электронной почты или полный url, соответственно (ну, почти: браузерная поддержка типа email является довольно приличный, а типа url несколько поверхностной).

Мы можем объединить атрибут pattern с этими типами элемента input, чтобы еще больше ограничить значения, которые может ввести пользователь, например, ограничить адрес электронной почты определенным доменом. В листинге 14-9 представлен пример.

Листинг 14-9: Использование атрибута pattern с элементом input типа email
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<meta name="author" content="Adam Freeman" />
	<meta name="description" content="A simple example" />
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
	<form method="post" action="http://titan:8080/form">
		<input type="hidden" name="recordID" value="1234" />
		<p>
			<label for="name">
				Name:
				<input type="text" id="name" name="name" pattern="^.* .*$" />
			</label>
		</p>
		<p>
			<label for="password">
				Password:
				<input type="password"
					placeholder="Min 6 characters" id="password" name="password" />
			</label>
		</p>
		<p>
			<label for="email">
				Email:
				<input type="email" placeholder="user@mydomain.com" required
					pattern=".*@mydomain.com$" id="email" name="email" />
			</label>
		</p>
		<input type="submit" value="Submit" />
	</form>
</body>
</html>

В листинге 14-9 я использовал три возможности валидации. Тип email элемента input гарантирует, что пользователь вводит действующий адрес электронной почты. Атрибут required гарантирует, что пользователь обязательно предоставляет значение. Атрибут pattern гарантирует, что пользователь вводит адрес электронной почты, который принадлежит к определенному домену (mydomain.com). Использование типа email элемента input и атрибута pattern может показаться излишним, но элемент input по-прежнему отвечает за то, что все знаки до символа @ относятся к действительному адресу электронной почты.