ValidityState: rangeUnderflow 屬性
ValidityState 介面的只讀 rangeUnderflow 屬性指示使用者編輯後的 <input> 元素的值是否不符合該元素 min 屬性設定的約束。
如果欄位本質上是數字型別的，包括 date、month、week、time、datetime-local、number 和 range 型別，並且設定了 min 值，那麼如果值不符合 min 值設定的約束，rangeUnderflow 屬性將為 true。
值
如果 ValidityState 不符合約束，則為 true 的布林值。
示例
數值下溢的輸入
以下示例檢查了 數字輸入元素 的有效性。使用 min 屬性添加了一個約束，該屬性將輸入的最小值設定為 18。如果使用者輸入的數字小於 18，則該元素將無法透過約束驗證，並會匹配 :invalid 和 :out-of-range CSS 偽類的樣式。
css
/* or :invalid */
input:out-of-range {
outline: red solid 3px;
}
html
<pre id="log">Validation logged here...</pre>
<input type="number" id="age" min="18" />
js
const userInput = document.getElementById("age");
const logElement = document.getElementById("log");
function log(text) {
logElement.innerText = text;
}
userInput.addEventListener("input", () => {
userInput.reportValidity();
if (userInput.validity.rangeUnderflow) {
log("Number is too low!");
} else {
log("Valid…");
}
});
規範
| 規範 |
|---|
| HTML # dom-validitystate-rangeunderflow |
瀏覽器相容性
載入中…