ValidityState: stepMismatch 属性

基线 广泛可用

此功能已得到很好的确立，并且可在许多设备和浏览器版本中使用。它已在浏览器中可用，自 2018 年 12 月.

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

如果字段本质上是数字型的，包括日期、月份、星期、时间、本地日期和时间、数字和范围类型，并且步长值不是any，如果该值不符合由step和min值设置的约束，则stepMismatch将为 true。如果表单控件的值减去min值，除以step值（如果省略则默认为 1）的余数不为零，则存在不匹配。

值

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

示例

步长不匹配的输入

以下示例检查数字输入元素的有效性。已使用step属性添加了约束，这意味着输入期望以 5 为增量作为值。如果用户输入的数字不能被 5 整除，则元素将无法通过约束验证，并且与:invalidCSS 伪类匹配的样式将被应用。

css
input:invalid {
  outline: red solid 3px;
}
html
<pre id="log">Validation logged here...</pre>
<input type="number" id="degrees" step="5" />
js
const userInput = document.getElementById("degrees");
const logElement = document.getElementById("log");

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

userInput.addEventListener("input", () => {
  userInput.reportValidity();
  if (userInput.validity.stepMismatch) {
    log("Input must be divisible by 5");
  } else {
    log("Input is valid…");
  }
});

规范

规范
HTML 标准
# dom-validitystate-stepmismatch

浏览器兼容性

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

另请参阅