ValidityState: typeMismatch 属性

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

ValidityState 接口中只读的 typeMismatch 属性指示一个 <input> 元素的值（在用户编辑后）不符合该元素 type 属性设置的约束。

如果 type 属性期望特定的字符串，例如 email 和 url 类型，而值不符合该类型设置的约束，则 typeMismatch 属性将为 true。

email 输入类型期望一个或多个有效的电子邮件地址，具体取决于是否包含 multiple 属性。有效的电子邮件地址包括电子邮件前缀和域名，可包含或不包含顶级域名 (TLD)。如果 email 输入的值不是空字符串、单个有效电子邮件地址，或者（当存在 multiple 属性时）一个或多个以逗号分隔的电子邮件地址，则会发生 typeMismatch。

url 输入类型期望一个或多个有效的 URL，具体取决于是否包含 multiple 属性。有效的 URL 包括协议，可选地带有 IP 地址，或者可选的子域名、域名和顶级域名组合。如果 URL 输入的值不是空字符串、单个有效 URL，或者（当存在 multiple 属性时）一个或多个以逗号分隔的 URL，则会发生 typeMismatch。

输入类型	值	预期值
电子邮件	`x@y` 或 `x@y.z`	电子邮件地址，可包含或不包含 TLD
url	`x:` 或 `x://y.z`	协议或带协议的完整 URL

<pre id="log">Validation logged here...</pre>
<p>
  <label>
    Enter an email address:
    <input id="emailInput" type="email" value="example.com" required />
  </label>
</p>

css

input:invalid {
  border: red solid 3px;
}

body {
  margin: 0.5rem;
}
pre {
  padding: 1rem;
  height: 2rem;
  background-color: lightgrey;
  outline: 1px solid grey;
}

const emailInput = document.getElementById("emailInput");
const logElement = document.getElementById("log");

function log(text) {
  logElement.innerText = text;
}

emailInput.addEventListener("input", () => {
  emailInput.reportValidity();
  if (emailInput.validity.valid) {
    log("Input OK…");
  } else if (emailInput.validity.typeMismatch) {
    log("Input is not an email.");
  } else {
    log(`Validation failed: ${emailInput.validationMessage}`);
  }
});