Атрибут 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
,
с помощью которого можно сделать проверку на пустоту