ValidityState: stepMismatch 属性

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

ValidityState 接口中只读的 stepMismatch 属性表明，在用户编辑后，<input> 元素的值不符合元素 step 属性设置的约束。

如果字段是数值型的，包括 date、month、week、time、datetime-local、number 和 range 类型，并且 step 值不是 any，如果值不符合 step 和 min 值设置的约束，则 stepMismatch 将为 true。如果表单控件的值减去 min 值，再除以 step 值（如果省略则默认为 1）的余数不为零，则存在不匹配。

值

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

示例

步长不匹配的输入

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

css

input:invalid {
  outline: red solid 3px;
}

body {
  margin: 0.5rem;
}
pre {
  padding: 1rem;
  height: 2rem;
  background-color: lightgrey;
  outline: 1px solid grey;
}

html

<pre id="log">Validation logged here...</pre>
<input type="number" id="degrees" step="5" />

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

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后修改于 2025年4月10日，由 MDN 贡献者修改。

在 GitHub 上查看此页面 • 报告此内容的某个问题