ValidityState: rangeUnderflow 属性

基线 广泛可用

此功能已经稳定，并且适用于许多设备和浏览器版本。它自以下日期起在各个浏览器中可用： 2018 年 12 月.

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

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅