ValidityState.patternMismatch

Baseline 2023

Newly available

Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Доступное только для чтения свойство 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

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