ValidityState: rangeOverflow 屬性

Baseline 已廣泛支援

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

ValidityState 介面的只讀屬性 rangeOverflow 指示一個 <input> 元素的值（在使用者編輯後）是否不符合該元素 max 屬性設定的約束。

如果欄位具有數值性質，包括 date、month、week、time、datetime-local、number 和 range 型別，並且設定了 max 值，如果值不符合 max 值設定的約束，則 rangeOverflow 屬性將為 true。

值

如果 ValidityState 不符合約束，則為 true 的布林值。

示例

數值溢位的輸入

以下示例檢查一個數值輸入元素的有效性。透過 max 屬性添加了一個約束，該約束將輸入的上限值設定為 18。如果使用者輸入的數字大於 18，該元素將無法透過約束驗證，並且與 :invalid 和 :out-of-range CSS 偽類匹配的樣式將被應用。

css

/* or :invalid */
input:out-of-range {
  outline: red 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" max="18" />

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

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

userInput.addEventListener("input", () => {
  userInput.reportValidity();
  if (userInput.validity.rangeOverflow) {
    log("Number is too high!");
  } else {
    log("Input is valid…");
  }
});

規範

規範
HTML # dom-validitystate-rangeoverflow

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

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

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