ValidityState: patternMismatch 属性
ValidityState 接口中只读的 patternMismatch 属性指示用户编辑后的 <input> 元素的值是否不符合元素 pattern 属性设置的约束。
仅当以下条件全部为真时，patternMismatch 属性才为 true：
值
一个布尔值，如果 ValidityState 对象不符合约束，则为 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 个部分，并为所有三个电话号码组件设置了一个隐式标签，分别期望 3 位、3 位和 4 位数字，如每个部分上设置的 pattern 属性所定义。
如果值太长或太短，或者包含非数字字符，patternMismatch 将为 true。当为 true 时，该元素将匹配 :invalid CSS 伪类。
css
input:invalid {
border: red solid 3px;
}
请注意，在这种情况下，如果值太长或太短，我们会得到一个 patternMismatch，而不是 validityState.tooLong 或 validityState.tooShort，因为是 pattern 决定了值的长度。如果我们改用 minlength 和 maxlength 属性，我们可能会看到 validityState.tooLong 或 validityState.tooShort 为 true。
注意： email 输入类型至少需要匹配 x@y，而 url 类型至少需要匹配 x:，且没有 pattern 属性。当无效时，如果不存在 pattern 属性（或 pattern 属性对于该输入类型无效），则 validityState.typeMismatch 将为 true。
规范
| 规范 |
|---|
| HTML # dom-validitystate-patternmismatch |
浏览器兼容性
加载中…