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 июль 2015 г..

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

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 15 апр. 2025 г. by MDN contributors.

View this page on GitHub • Report a problem with this content

ValidityState.patternMismatch

In this article

Примеры

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

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

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

Help improve MDN