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 上檢視此頁面 • 報告此內容的某個問題