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}`);
  }
});