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 |
浏览器兼容性
加载中…