Атрибут pattern

Указывает регулярное выражение, согласно которому требуется вводить и проверять данные в поле формы. Если присутствует атрибут pattern, то форма не будет отправляться, пока поле не будет заполнено правильно.

Синтаксис

<input type="email" pattern="<выражение>">
<input type="tel" pattern="<выражение>">
<input type="text" pattern="<выражение>">
<input type="search" pattern="<выражение>">
<input type="url" pattern="<выражение>">

Значения

Некоторые типовые регулярные выражения перечислены в табл. 1.

Табл. 1. Регулярные выражения
ВыражениеОписание
\d [0-9]Одна цифра от 0 до 9.
\D [^0-9]Любой символ кроме цифры.
\sПробел.
[A-Z]Только заглавная латинская буква.
[A-Za-z]Только латинская буква в любом регистре.
[А-Яа-яЁё]Только русская буква в любом регистре.
[A-Za-zА-Яа-яЁё]Любая буква русского и латинского алфавита.
[0-9]{3}Три цифры.
[A-Za-z]{6,}Не менее шести латинских букв.
[0-9]{,3}Не более трёх цифр.
[0-9]{5,10}От пяти до десяти цифр.
^[a-zA-Z]+$Любое слово на латинице.
^[А-Яа-яЁё\s]+$Любое слово на русском включая пробелы.
^[ 0-9]+$Любое число.
[0-9]{6}Почтовый индекс.
\d+(,\d{2})?Число в формате 1,34 (разделитель запятая).
\d+(\.\d{2})?Число в формате 2.10 (разделитель точка).
\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}IP-адрес

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Атрибут pattern</title>
 </head>
  <body>
   <form action="handler.php">
    <p>Введите телефон в формате 2-xxx-xxx, где вместо x 
    должна быть цифра:</p>
    <p><input type="tel" pattern="2-[0-9]{3}-[0-9]{3}"></p>
    <p><input type="submit" value="Отправить"></p>
   </form>
  </body>
</html>

Браузеры ?

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — элемент полностью поддерживается браузером;
  •  — элемент браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 08.11.2016
Редакторы: Влад Мержевич
Курс по вёрстке сайта на CSS Grid