pattern атрибут HTML

Атрибут pattern задаёт регулярное выражение, которому должно соответствовать значение элемента управления формы. Если значение, не являющееся null, не соответствует ограничениям, заданным значением pattern, свойство только для чтения ValidityState объекта patternMismatch будет равно true.

Попробуйте

<label for="username">Username: (3-16 characters)</label>
<input
  id="username"
  name="username"
  type="text"
  value="Sasha"
  pattern="\w{3,16}"
  required />

<label for="pin">PIN: (4 digits)</label>
<input id="pin" name="pin" type="password" pattern="\d{4,4}" required />

label {
  display: block;
  margin-top: 1em;
}

input:valid {
  background-color: palegreen;
}

input:invalid {
  background-color: lightpink;
}

Обзор

Атрибут pattern используется с элементами ввода типа text, tel, email, url, password и search.

Если атрибут pattern указан, он задаёт регулярное выражение, которому должно соответствовать value элемента ввода, чтобы значение прошло проверку ограничений. Это должно быть корректное регулярное выражение JavaScript, используемое типом RegExp и описанное в нашем руководстве по регулярным выражениям.

Регулярное выражение шаблона компилируется с флагом 'v'. Это делает регулярное выражение учитывающим Unicode, а также изменяет интерпретацию классов символов. Это позволяет выполнять операции пересечения и вычитания множеств в классах символов. Кроме ] и \, следующие символы необходимо экранировать с помощью обратной косой черты \, если они обозначают литеральные символы: (, ), [, {, }, /, -, |. До середины 2023 года вместо этого указывался флаг 'u'; если вы обновляете старый код, ознакомьтесь со справочником unicodeSets.

Регулярное выражение шаблона должно совпадать со всем значением value, а не только с его частью, — так, как если бы в начале шаблона подразумевался ^(?:, а в конце — )$.

Не указывайте косые черты вокруг текста шаблона. Регулярное выражение не применяется, если значение атрибута отсутствует, является пустой строкой или недопустимо.

Для некоторых типов элементов ввода, поддерживающих атрибут pattern, в частности email и url, предусмотрен синтаксис значений, которому они должны соответствовать. Если атрибут pattern не указан и значение не соответствует ожидаемому синтаксису для данного типа, свойство только для чтения ValidityState объекта typeMismatch будет равно true.

Проверка ограничений

Если значение элемента ввода не является пустой строкой и не соответствует регулярному выражению целиком, возникает нарушение ограничения: свойство patternMismatch объекта ValidityState становится равным true.

Удобство использования и доступность

При использовании pattern добавьте рядом с элементом управления видимое текстовое описание шаблона. Кроме того, укажите атрибут title с описанием шаблона. Во время проверки ограничений пользовательские агенты могут использовать содержимое title, чтобы сообщить пользователю о несоответствии шаблону. Некоторые браузеры отображают содержимое title во всплывающей подсказке, что делает использование удобнее для зрячих пользователей. Кроме того, вспомогательные технологии могут произносить содержимое title при получении элементом управления фокуса, однако для обеспечения доступности на это не следует полагаться.

Не рекомендуется полагаться только на атрибут title для отображения текстового содержимого, поскольку многие пользовательские агенты не предоставляют этот атрибут доступным способом. Хотя некоторые браузеры показывают всплывающую подсказку при наведении на элемент с атрибутом title, она недоступна пользователям, которые работают только с клавиатурой или сенсорным экраном. Это одна из нескольких причин, по которым необходимо объяснять пользователям, как заполнить элемент управления в соответствии с требованиями.

Некоторые браузеры используют title для формирования сообщений об ошибках. Однако браузеры иногда также показывают title при наведении курсора, в том числе когда ошибки нет, поэтому не формулируйте текст title так, словно ошибка уже произошла.

Примеры

Проверка соответствия номера телефона

Рассмотрим следующий пример:

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

Здесь номер телефона в североамериканском формате разделён на 3 части, охваченные неявной меткой. Для каждой части ожидается соответственно 3, 3 и 4 цифры, как задано атрибутом pattern для каждого элемента.

Если значения слишком длинные или короткие либо содержат нецифровые символы, свойство patternMismatch будет равно true. Когда true, элемент соответствует псевдоклассу CSS :invalid.

input:invalid {
  border: red solid 3px;
}

Если бы вместо этого мы использовали атрибуты minlength и maxlength, свойство validityState.tooLong или validityState.tooShort могло бы стать равным true.

Задание шаблона

Вы можете использовать атрибут pattern, чтобы задать регулярное выражение, которому должно соответствовать введённое значение, чтобы считаться допустимым (краткое введение в проверку введённых данных с помощью регулярных выражений см. в разделе Проверка с помощью регулярного выражения).

Пример ниже ограничивает значение 4–8 символами и требует, чтобы оно содержало только строчные буквы.

<form>
  <div>
    <label for="uname">Choose a username: </label>
    <input
      type="text"
      id="uname"
      name="name"
      required
      size="45"
      pattern="[a-z]{4,8}"
      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>Submit</button>
  </div>
</form>

Результат будет выглядеть так:

Спецификации

Совместимость с браузерами

См. также

• Проверка ограничений
• Формы: проверка корректности данных
• Регулярные выражения