ValidityState: свойство patternMismatch

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

Значение patternMismatch будет истинным тогда и только тогда, когда выполняются все следующие условия:

• поле поддерживает атрибут pattern — это означает, что <input> имеет тип type text, tel, email, url, password или search
• атрибут pattern содержит допустимое регулярное выражение
• значение <input> не соответствует ограничениям, заданным значением атрибута pattern.

Булево значение, которое равно true если объект ValidityState не соответствует ограничениям.

Рассмотрим следующий пример:

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

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

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

Обратите внимание, в данном случае мы получаем patternMismatch а не validityState.tooLong или validityState.tooShort, если значения слишком длинные или слишком короткие, потому что именно шаблон определяет длину значения. Если бы вместо этого мы использовали атрибуты minlength и maxlength, мы могли бы увидеть validityState.tooLong или validityState.tooShort истинными.

• Проверка ограничений
• Формы: Проверка форм
• Регулярные выражения