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