HTML5 中怎么用 validity.stepMismatch 捕获数字输入不符合步长倍数的错误-H5教程-PHP中文网

stepMismatch 在 input 有 step 属性、输入值语法合法且非 step 整数倍时为 true；需通过 checkValidity() 或 invalid 事件检测，注意浮点精度与浏览器兼容性。

html5 中怎么用 validity.stepmismatch 捕获数字输入不符合步长倍数的错误

validity.stepMismatch 是 HTML5 表单验证中用于检测用户输入值不满足 step 属性约束的布尔属性。它只在（或 range、date 等支持 step 的类型）上有效，且仅当输入值为有效数字（或日期等）但**不是 step 的整数倍**时才为 true。

什么时候 stepMismatch 会触发？

需同时满足以下条件：

输入框有 step 属性（如 step="0.5" 或 step="2"）；
用户输入的是语法合法的数字（例如 "3.1"、"7"），未触发 valueAsNumber NaN 或 badInput；
该数字除以 step 后余数不为 0（即不是 step 的整数倍）。

例如： → 1.2 / 0.5 = 2.4，非整数 → validity.stepMismatch === true。

如何用 JavaScript 捕获并响应 stepMismatch

不能仅靠 onchange 或 oninput 自动触发验证，需显式调用 checkValidity() 或监听 invalid 事件：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

监听 invalid 事件：该事件在表单提交失败或手动调用 reportValidity() 时触发，此时可读取 validity.stepMismatch。
主动检查：在 input 或 change 时调用 checkValidity()，再判断 validity.stepMismatch。

示例：

<input type="number" id="price" step="0.01" min="0" placeholder="请输入价格（元）"><div id="error"></div>

<script>
const input = document.getElementById('price');
const errorEl = document.getElementById('error');

input.addEventListener('input', () => {
  if (!input.checkValidity()) {
    if (input.validity.stepMismatch) {
      errorEl.textContent = '输入值必须是 0.01 的整数倍（如 9.99、10.00）';
    } else if (input.validity.rangeUnderflow) {
      errorEl.textContent = '不能小于 0';
    } else {
      errorEl.textContent = '';
    }
  } else {
    errorEl.textContent = '';
  }
});
</script>

注意边界与兼容性细节

step 默认值为 1；设为 any（step="any"）则禁用步长检查，stepMismatch 永远为 false；
浮点精度问题：浏览器内部用二进制计算，0.1 + 0.2 !== 0.3 可能导致误判。建议对关键场景（如金额）用整数处理（单位“分”），或自定义校验逻辑；
Chrome/Firefox/Edge 均支持，但 Safari 对 stepMismatch 在某些输入时机（如粘贴）响应略滞后，建议配合 setTimeout(..., 0) 延迟读取；
validity.stepMismatch 为 true 时，validity.valid 必为 false，但反之不成立——其他错误（如 rangeOverflow）也可能导致整体无效。