Атрибут pattern задает проверку поля ввода HTML формы по регулярному выражению.

Регулярные выражения - это специальные команды, которые позволяют создать практически любые правила проверки. Подробнее с ними вы можете познакомится в книге по регулярным выражениям PHP или в книге по регулярным выражениям JavaScript.

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

Имейте ввиду, что наличие атрибута pattern не освобождает вас от проверки правильности заполненности формы со стороны сервера на PHP (так как защиту через pattern легко обойти).

Атрибут pattern следует применять к тегам input или textarea.

См. также атрибут required, наличие которого заставляет браузер проверять то, что поле ввода не пустое.

Примеры

Пример

В данном примере тегу input добавлен атрибут pattern, в котором лежит регулярное выражение, проверяющее то, что в инпут введено число из двух цифр (например, 25).

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

<form action="">
	<input type="text" placeholder="Введите число" pattern="\d{2}">
	<input type="submit">
</form>

Результат выполнения кода:

Пример . Атрибуты pattern и require вместе

В предыдущем примере браузер выдавал ошибку только в том случае, если поле было не пустым (хотя пустое поле не является числом с двумя цифрами). Чтобы ошибка выдавалась и на пустое поле - вместе с атрибутом pattern напишем еще и атрибут required:

<form action="">
	<input type="text" placeholder="Введите число" pattern="\d{2}" required>
	<input type="submit">
</form>

Результат выполнения кода: