ValidityState.patternMismatch

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since December 2018.

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

Если поле поддерживает атрибут pattern, это значит, что <input> содержит type text, tel, email, url, password или search и в значении атрибута задано валидное регулярное выражение. Если значение не соответствует ограничениям, заданным в 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 и maxlength, для валидации можно было использовать validityState.tooLong или validityState.tooShort.

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

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

Specification
HTML Standard
# dom-validitystate-patternmismatch

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

BCD tables only load in the browser

Смотрите также