ValidityState.patternMismatch

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

Если поле поддерживает атрибут pattern, это значит, что <input> содержит type text (en-US), tel, email (en-US), url (en-US), 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 (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

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