ValidityState.typeMismatch

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.

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

Если атрибут type получает типы вроде email (en-US) или url (en-US), а значение не соответствует ограничениям данного типа, свойство typeMismatch будет true.

Тип email (en-US) допускает ввод одного или нескольких email-адресов, в зависимости от наличия атрибута multiple (en-US). Валидный email-адрес включает префикс электронной почты и домен, с доменом верхнего уровня или без него. Если значение поля email-адреса не является пустой строкой, одним или несколькими email-адресами, разделёнными запятой (если присутствует атрибут multiple (en-US)), то это typeMismatch.

Тип url (en-US) допускает ввода одного или нескольких url-адресов, в зависимости от наличия атрибута multiple (en-US). Валидный URL-адрес включает протокол с IP-адресом или комбинацией поддоменом, домена и домен верхнего уровня. Если значение поля URL не ялвяется пустой строкой, одним или несколькими URL-адресами, разделёнными запятой (если присутствует атрибут multiple (en-US)), то это typeMismatch.

Тип input Значение Ожидаемое значение
email (en-US) x@y или x@y.z Email-адрес с или без TLD (en-US)
url (en-US) x: или x://y.z Протокол или полный URL с протоколом

Примеры

Учитывая следующее:

html

<p>
  <label>
    Enter an email address:
    <input type="email" value="example.com" />
  </label>
</p>
<p>
  <label>
    Enter a URL:
    <input type="url" value="example.com" />
  </label>
</p>

css

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

В примере выше в обоих полях происходит typeMismatch, потому что email-адрес является просто доменом, а URL не содержит протокол

typeMismatch происходит при несоответствии значения, заданного в атрибуте type и содержимым поля. typeMismatch является лишь одной из возможных ошибок и возможна только для полей email (en-US) и url (en-US). Когда введённое значение не соответствует ожидаемому для других полей ввода, в зависимости от типа поля будут возникать разные ошибки. Например, если в поле number ввести значение не являющееся числом с плавающей запятой, badInput будет true. Если обязательное поле email не заполнено, valueMissing (en-US) будет true.

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

Specification
HTML Standard
# dom-validitystate-typemismatch

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

BCD tables only load in the browser

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