Атрибут pattern

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

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

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

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

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

Пример

Давайте обратимся к тегу 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>

Смотрите также

атрибут required,
с помощью которого можно сделать проверку на пустоту