ValidityState.patternMismatch

Доступное только для чтения свойство patternMismatch объекта ValidityState указывает, соответствует ли значение <input> шаблону, указанному в атрибуте pattern.

Если поле поддерживает атрибут pattern, это значит, что <input> содержит type text (en-US), tel, email (en-US), url (en-US), password или search (en-US) и в значении атрибута задано валидное регулярное выражение. Если значение не соответствует ограничениям, заданным в pattern, свойство patternMismatch будет true.

Примеры

Учитывая следующее:

html

<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 поля для номера телефона северной Америки, помещённых внутрь label. В каждом поле, как определено в атрибуте pattern, ожидается ввод 3, 3 и 4 символов соответственно.

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

css

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

Обратите внимание, что в данном примере мы получаем значение свойства patternMismatch, а не validityState.tooLong или validityState.tooShort, потому что ограничения заданы именно с помощью атрибута pattern. Если бы вместо него использовались атрибуты minlength (en-US) и maxlength (en-US), для валидации можно было использовать validityState.tooLong или validityState.tooShort.

Примечание: Примечание: Если атрибут pattern не используется, поле email (en-US) требует, соответствия значения хотя бы формату x@y, а поле url (en-US) — хотя бы формату x:. Если поле не валидно, свойство validityState.typeMismatch будет true, если не используется атрибут pattern.

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

Specification
HTML Standard
# dom-validitystate-patternmismatch

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

BCD tables only load in the browser

Также смотрите