ValidityState.patternMismatch
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since December 2018.
Доступное только для чтения свойство patternMismatch
объекта ValidityState
указывает, соответствует ли значение <input>
шаблону, указанному в атрибуте pattern
.
Если поле поддерживает атрибут pattern
, это значит, что <input>
содержит type
text, tel, email, url, password или search и в значении атрибута задано валидное регулярное выражение. Если значение не соответствует ограничениям, заданным в pattern
, свойство patternMismatch
будет true
.
Примеры
Учитывая следующее:
<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
.
input:invalid {
border: red solid 3px;
}
Обратите внимание, что в данном примере мы получаем значение свойства patternMismatch
, а не validityState.tooLong
или validityState.tooShort
, потому что ограничения заданы именно с помощью атрибута pattern
. Если бы вместо него использовались атрибуты minlength
и maxlength
, для валидации можно было использовать validityState.tooLong
или validityState.tooShort
.
Примечание: Если атрибут pattern
не используется, поле email
требует, соответствия значения хотя бы формату x@y
, а поле url
— хотя бы формату x:
. Если поле не валидно, свойство validityState.typeMismatch
будет true
, если не используется атрибут pattern
.
Спецификации
Specification |
---|
HTML Standard # dom-validitystate-patternmismatch |
Совместимость с браузерами
BCD tables only load in the browser