Атрибут pattern

Говорим браузеру, каким должно быть значение полей формы.

Время чтения: меньше 5 мин

Обновлено 8 сентября 2022

Кратко

Скопировать ссылку «Кратко» Скопировано

В атрибуте pattern пишется регулярное выражение, которому должно соответствовать введённое в значение.

Пример

Скопировать ссылку «Пример» Скопировано

В этом примере браузер проверит перед отправкой формы, что пароль не меньше 6 символов в длину:

   ">  form> input type="password" pattern="."> button>Отправитьbutton> form>

 Как пишется
 Скопировать ссылку "Как пишется" Скопировано
 Атрибут pattern можно применить только к тегам и только со следующими значениями атрибута type :
 Значением должно быть регулярное выражение, по которому браузер перед отправкой формы будет проверять то, что введено в поле. Если значение не соответствует регулярному выражению браузер покажет всплывающую подсказку с ошибкой. Механизм с ошибкой сработает только при отправке поля из «настоящей» формы с тегом , без формы вам придётся проверять поле самостоятельно.
 Текст всплывающей подсказки можно дополнить при помощи атрибута title . Большинство браузеров покажут этот текст вместе с ошибкой. В примере ниже в подсказке помимо стандартного текста будет написано «Минимум 6 символов».
    Придумайте пароль: " title="Минимум 6 символов">  label> Придумайте пароль: input type="password" pattern="." title="Минимум 6 символов"> label>      
 
 На практике
 Скопировать ссылку "На практике" Скопировано
 Алёна Батицкая советует
 Скопировать ссылку "Алёна Батицкая советует" Скопировано
 🛠 Лучше не писать слишком строгие паттерны для проверки значений. Вы никогда не сможете предугадать все возможные сценарии. Например, на многих сайтах формы настроены так, что я не могу ввести своё имя через Ё. В регулярном выражении не прописано, что это допустимый символ. Проверяйте только то, что действительно необходимо. К примеру, для валидации имейла достаточно проверить, что в тексте есть символ @ .
 Источник
 Атрибут pattern
 Указывает регулярное выражение, согласно которому требуется вводить и проверять данные в поле формы. Если присутствует атрибут pattern , то форма не будет отправляться, пока поле не будет заполнено правильно.
 Синтаксис
 Значения
 Некоторые типовые регулярные выражения перечислены в табл. 1.
 
Табл. 1. Регулярные выражения 
  Выражение  Описание  
  \d 2  Одна цифра от 0 до 9.  
  \D [^0-9]  Любой символ кроме цифры.  
  \s  Пробел.  
  [A-Z]  Только заглавная латинская буква.  
  [A-Za-z]  Только латинская буква в любом регистре.  
  [А-Яа-яЁё]  Только русская буква в любом регистре.  
  [A-Za-zА-Яа-яЁё]  Любая буква русского и латинского алфавита.  
  4 Три цифры.  
  [A-Za-z] Не менее шести латинских букв.  
  4 Не более трёх цифр.  
  1 От пяти до десяти цифр.  
  ^[a-zA-Z]+$  Любое слово на латинице.  
  ^[А-Яа-яЁё\s]+$  Любое слово на русском включая пробелы.  
  ^[ 0-9]+$  Любое число.  
  3 Почтовый индекс.  
  \d+(,\d)?  Число в формате 1,34 (разделитель запятая).  
  \d+(\.\d)?  Число в формате 2.10 (разделитель точка).  
  \d\.\d\.\d\.\d IP-адрес  
 
        Введите телефон в формате 2-xxx-xxx, где вместо x должна быть цифра:
 -7">
  
 Статьи по теме
 Источник
 HTML Атрибут pattern
 Атрибут pattern (от англ. "pattern" — «шаблон») задаёт шаблон (регулярное выражение) для значения текстового элемента формы. Если присутствует атрибут pattern , то форма не будет отправляться, пока поле не будет заполнено правильно.
 Совет: Рекомендуется указывать описание шаблона в глобальном атрибуте title и/или в тексте рядом с соответствующим элементом формы.
 Синтаксис
 input type=". " pattern="[значение]">
 Значения
 В качестве значения данного атрибута указывается любое регулярное выражение. Регулярное выражение может включать в себя следующие обозначения:
 Инверсия
 ^ Инверсия значения. Обозначает, что в значении должны отсутствовать символы указанные после символа « ^ » ЦИРКУМФЛЕКС [U+005E].
 Числа
 [09] Соответствует одному из указанных символов, то есть в данном случае « 0 » или « 9 ». 5 Соответствует любому одному символу из указанного диапазона, то есть в данном случае от « 0 » до « 9 ». Буквы
 Примечание: при указании символов учитывается их регистр:
  [abc] ‒ соответствует английской букве « a », « b » или « c ».
 [ABC] ‒ соответствует английской букве « A », « B » или « C ».
 [aBc] ‒ соответствует английской букве « a », « B » или « c ».
 [абв] ‒ соответствует русской букве « а », « б » или « в ».
 [АБВ] ‒ соответствует русской букве « А », « Б » или « В ».
 [аБв] ‒ соответствует русской букве « а », « Б » или « в ».
 
 Примечание: для указания всех букв алфавита используются следующие шаблоны:
  [a-z] ‒ соответствует любой английской букве.
 [A-Z] ‒ соответствует любой английской букве.
 [a-zA-Z] ‒ соответствует любой английской букве в любом регистре.
 [а-яё] ‒ соответствует любой русской букве.
 [А-ЯЁ] ‒ соответствует любой русской букве.
 [а-яёА-ЯЁ] ‒ соответствует любой русской букве в любом регистре.
 
 Специальные символы
 \d Соответствует любой цифре. (Аналогично значению « 9 ») \w Соответствует любой латинской букве, цифре и знаку препинания. \s Соответствует любому пробельному символу. \D Соответствует любым символам кроме цифр. (Аналогично значению « [^0-9] ») \W Соответствует любым символам кроме латинских букв, цифр и знаков препинания. \S Соответствует любым символам кроме пробельных символов.
 Квантификаторы (количество вхождений символа в строку)
 « n » вхождений предыдущего символа(-ов) в строку. « n » или более вхождений предыдущего символа(-ов) в строку. От (не менее) « n » до (не более) « m » вхождений предыдущего символа(-ов) в строку. * Произвольное число вхождений предыдущего символа(-ов) в строку. + Одно или более число вхождений предыдущего символа(-ов) в строку. ? Ни одного или одно вхождение предыдущего символа(-ов) в строку.
 Примечание: Если в шаблоне необходимо указать какой-либо специальный символ (например, ( , < , + ), то его следует экранировать с помощью символа \ ОБРАТНЫЙ СЛЕШ [U+005C] (например, ( ⇒ \( , < ⇒ \< , + ⇒ \+ ).
 Значение по умолчанию
 Применяется к тегам
 Примечание: Атрибут pattern может быть использован с полями данных (тег input ) следующих типов (атрибут type ): text, search, url, tel, email, и password.
 Отличия HTML 4.01 от HTML 5
 Атрибут является новым в HTML 5.
 Примеры использования:
 Атрибут pattern (Элемент )
 HTML форма с полем ввода, которое может содержать только три буквы:
 Пример HTML:
  Введите код: " title="Три буквы кода"> 
 Атрибут pattern (Элемент )
 HTML форма с полем ввода, которое должно содержать 6 и более символов:
 Пример HTML:
  Пароль: " title="6 и более символов"> 
 Атрибут pattern (Элемент )
 HTML форма с полем ввода, которое должно содержать 8 или более символов, в том числе по меньшей мере, одну цифру, одну прописную, одну строчные буквы:
 Пример HTML:
  Пароль: " title="8 или более символов, в том числе по меньшей мере, одну цифру, одну прописную, одну строчные буквы"> 
 Поддержка браузерами
 Источник
 HTML attribute: pattern
 The pattern attribute specifies a regular expression the form control's value should match. If a non- null value doesn't conform to the constraints set by the pattern value, the ValidityState object's read-only patternMismatch property will be true.
 Try it
 Overview
 The pattern attribute is an attribute of the text, tel, email, url, password, and search input types.
 The pattern attribute, when specified, is a regular expression which the input's value must match for the value to pass constraint validation. It must be a valid JavaScript regular expression, as used by the RegExp type, and as documented in our guide on regular expressions; the 'u' flag is specified when compiling the regular expression so that the pattern is treated as a sequence of Unicode code points, instead of as ASCII. No forward slashes should be specified around the pattern text.
 If the specified pattern is not specified or is invalid, no regular expression is applied and this attribute is ignored.
 Note: Use the title attribute to specify text that most browsers will display as a tooltip to explain what the requirements are to match the pattern. You must not rely on the tooltip alone for an explanation. See below for more information on usability.
 Some of the input types supporting the pattern attribute, notably the email and url input types, have expected value syntaxes that must be matched. If the pattern attribute isn't present, and the value doesn't match the expected syntax for that value type, the ValidityState object's read-only typeMismatch property will be true.
 Usability
 When including a pattern , provide a description of the pattern in visible text near the control. Additionally, include a title attribute which gives a description of the pattern. User agents may use the title contents during constraint validation to tell the user that the pattern is not matched. Some browsers show a tooltip with title contents, improving usability for sighted users. Additionally, assistive technology may read the title aloud when the control gains focus, but this should not be relied upon for accessibility.
 Constraint validation
 If the input's value is not the empty string and the value does not match the entire regular expression, there is a constraint violation reported by the ValidityState object's patternMismatch property being true . The pattern's regular expression, when matched against the value, must have its start anchored to the start of the string and its end anchored to the end of the string, which is slightly different from JavaScript regular expressions: in the case of pattern attribute, we are matching against the entire value, not just any subset, as if a ^(?: were implied at the start of the pattern and )$ at the end.
 Note: If the pattern attribute is specified with no value, its value is implicitly the empty string. Thus, any non-empty input value will result in constraint violation.
 Examples
 Matching a phone number

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

p> label> Enter your phone number in the format (123) - 456 - 7890 (input name="tel1" type="tel" pattern="6" placeholder="###" aria-label="3-digit area code" size="2" />) - input name="tel2" type="tel" pattern="1" placeholder="###" aria-label="3-digit prefix" size="2" /> - input name="tel3" type="tel" pattern="1" placeholder="####" aria-label="4-digit number" size="3" /> label> p>

Here we have 3 sections for a north American phone number with an implicit label encompassing all three components of the phone number, expecting 3-digits, 3-digits and 4-digits respectively, as defined by the pattern attribute set on each.

If the values are too long or too short, or contain characters that aren't digits, the patternMismatch will be true. When true , the element matches the :invalid CSS pseudo-classes.

input:invalid  border: red solid 3px; >

If we had used minlength and maxlength attributes instead, we may have seen validityState.tooLong or validityState.tooShort being true.

Specifying a pattern

You can use the pattern attribute to specify a regular expression that the inputted value must match in order to be considered valid (see Validating against a regular expression for a simple crash course on using regular expressions to validate inputs).

The example below restricts the value to 4-8 characters and requires that it contain only lower-case letters.

form> div> label for="uname">Choose a username: label> input type="text" id="uname" name="name" required size="45" pattern="[a-z]" title="4 to 8 lowercase letters" /> span class="validity">span> p>Usernames must be lowercase and 4-8 characters in length.p> div> div> button>Submitbutton> div> form>

div  margin-bottom: 10px; position: relative; > p  font-size: 80%; color: #999; > input + span  padding-right: 30px; > input:invalid + span::after  position: absolute; content: "✖"; padding-left: 5px; > input:valid + span::after  position: absolute; content: "✓"; padding-left: 5px; >

Accessibility Concerns

When a control has a pattern attribute, the title attribute, if used, must describe the pattern. Relying on the title attribute for the visual display of text content is generally discouraged as many user agents do not expose the attribute in an accessible manner. Some browsers show a tooltip when an element with a title is hovered, but that leaves out keyboard-only and touch-only users. This is one of the several reasons you must include information informing users how to fill out the control to match the requirements.

While title s are used by some browsers to populate error messaging, because browsers sometimes also show the title as text on hover, it therefore shows in non-error situations, so be careful not to word titles as if an error has occurred.

Specifications

Browser compatibility

BCD tables only load in the browser

Атрибут pattern