ValidityState: rangeOverflow 属性

基线 广泛可用

此功能已经成熟，并且可以在许多设备和浏览器版本中使用。它自以下时间起在浏览器中可用： 2018 年 12 月.

的只读rangeOverflow属性ValidityState接口指示<input>元素的值在用户编辑后是否不符合元素的max属性设置的约束。

如果字段本质上是数字，包括日期、月份、周、时间、本地日期时间、数字和范围类型，并且设置了max值，如果该值不符合由max值设置的约束，则rangeOverflow属性将为 true。

值

如果ValidityState不符合约束，则为true的布尔值。

示例

数字溢出输入

以下示例检查数字输入元素的有效性。已使用max属性添加了约束，该属性为输入设置了最大值为18。如果用户输入的数字大于 18，则元素将无法通过约束验证，并且与:invalid和:out-of-rangeCSS 伪类匹配的样式

css
/* or :invalid */
input:out-of-range {
  outline: red solid 3px;
}
html
<pre id="log">Validation logged here...</pre>
<input type="number" id="age" max="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.rangeOverflow) {
    log("Number is too high!");
  } else {
    log("Input is valid…");
  }
});

规范

规范
HTML 标准
# dom-validitystate-rangeoverflow

浏览器兼容性

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

另请参阅