ValidityState: patternMismatch 属性

基线 广泛可用

此功能已很好地建立，并在许多设备和浏览器版本中运行。它自 2018 年 12 月.

报告反馈

ValidityState 接口的只读 patternMismatch 属性指示 <input> 的值（在用户编辑后）是否不符合元素 pattern 属性设置的约束。

值

<input> 值不符合 pattern 值设置的约束。

示例

如果 ValidityState 对象不符合约束，则为 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>

html

这里我们有 3 个部分用于北美电话号码，其中包含一个隐式标签，涵盖了电话号码的所有三个部分，分别期望 3 位数字、3 位数字和 4 位数字，如每个部分上设置的 pattern 属性所定义。

如果值过长或过短，或包含非数字字符，patternMismatch 将为 true。当为 true 时，元素与 :invalid CSS 伪类匹配。
input:invalid {
  border: red solid 3px;
}

css

注意，在这种情况下，我们得到了 patternMismatch，而不是 validityState.tooLong 或 validityState.tooShort（如果值过长或过短），因为是模式决定了值的长度。如果我们改用 minlength 和 maxlength 属性，我们可能看到 validityState.tooLong 或 validityState.tooShort 为 true。

规范

注意：email 输入类型至少需要匹配 x@y，而 url 类型至少需要匹配 x:，且没有 pattern 属性。如果无效，则 validityState.typeMismatch 将为 true（如果没有 pattern 属性，或者如果 pattern 属性对该输入类型无效）。
规范
# HTML 标准

浏览器兼容性

dom-validitystate-patternmismatch

另请参阅