ValidityState: typeMismatch 属性

基线 广泛可用

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

报告反馈

typeMismatch 是 ValidityState 接口的只读属性，用于指示 <input> 的值在用户编辑后是否符合元素的 type 属性设置的约束。

如果 type 属性期望特定的字符串，例如 电子邮件 和 URL 类型，并且值不符合类型设置的约束，则 typeMismatch 属性将为 true。

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

URL 输入类型期望一个或多个有效的 URL，具体取决于 multiple 属性是否存在。有效的 URL 包括协议，可以选择包含 IP 地址，或可选地包含子域、域和顶级域组合。如果 URL 输入的值不是空字符串、单个有效的 URL，或者如果存在 multiple 属性，则为一个或多个逗号分隔的 URL，则存在 typeMismatch。 值 输入类型
预期值 电子邮件 x@y 或 [email protected]
电子邮件地址，可以包含或不包含 顶级域 URL x: 或 x://y.z

值

协议或包含协议的完整 URL

示例

如果 ValidityState 不符合约束，则为一个布尔值，值为 true。

输入元素上的类型不匹配

当通过 type 属性期望的 value 与实际存在的数据之间存在不一致时，就会发生 typeMismatch。typeMismatch 只是众多可能的错误之一，并且仅与 电子邮件 和 URL 类型相关。当提供的值与其他输入类型的类型期望的值不匹配时，您会收到不同的错误。例如，如果 数字 输入值不是浮点数，则 badInput 为 true。如果电子邮件是 required 但为空，则 valueMissing 将为 true。
<pre id="log">Validation logged here...</pre>
<p>
  <label>
    Enter an email address:
    <input id="emailInput" type="email" value="example.com" required />
  </label>
</p>
html
input:invalid {
  border: red solid 3px;
}
css
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);
  }
});

规范

js
规范
# HTML 标准

浏览器兼容性

dom-validitystate-typemismatch

另请参阅