ValidityState.patternMismatch
Доступное только для чтения свойство patternMismatch
объекта ValidityState
указывает, соответствует ли значение <input>
шаблону, указанному в атрибуте pattern
.
Если поле поддерживает атрибут pattern
, это значит, что <input>
содержит type
text (en-US), tel, email (en-US), url (en-US), password или search (en-US) и в значении атрибута задано валидное регулярное выражение. Если значение не соответствует ограничениям, заданным в 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
(en-US) и maxlength
(en-US), для валидации можно было использовать 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