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