ValidityState: valid 屬性

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

ValidityState 介面的只讀屬性 valid 指示一個 ValidityState 物件的 <input> 元素的值是否滿足所有驗證約束，因此被認為是有效的。

如果為 true，則該元素匹配 :valid CSS 偽類；否則，將應用 :invalid CSS 偽類。

值

如果 ValidityState 符合所有約束，則為 true，否則為 false。

示例

顯示有效性狀態

以下示例檢查一個數字輸入元素的有效性。使用 min 屬性添加了一個約束，該約束為輸入設定了最小值 18。如果使用者輸入的任何值不是大於 17 的數字，則該元素將無法透過約束驗證，並且將應用匹配 input:invalid 的樣式。

css

input:invalid {
  outline: red solid 3px;
}
input:valid {
  outline: palegreen solid 3px;
}

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

html

<pre id="log">Validation logged here...</pre>
<input type="number" id="age" min="18" required />

const userInput = document.getElementById("age");
const logElement = document.getElementById("log");

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

userInput.addEventListener("input", () => {
  userInput.reportValidity();
  if (userInput.validity.valid) {
    log("Input OK…");
  } else {
    log("Bad input detected…");
  }
});

規範

規範
HTML # dom-validitystate-valid-dev

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 ⁨2025年4月10日⁩，由 MDN 貢獻者進行。

在 GitHub 上檢視此頁面 • 報告此內容存在問題