Атрибут HTML: pattern

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

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

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

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

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

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

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

Если значение ввода не пустое и не соответствует всему регулярному выражению, нарушение ограничения будет сообщено через свойство ValidityState объекта — patternMismatch, которое будет равно 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, элемент соответствует псевдоклассам CSS :invalid.

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

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

Вы можете использовать атрибут 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>

Это отображается следующим образом:

• Валидация ограничений
• Формы: Валидация данных формы
• Регулярные выражения