step属性仅约束用户通过控件输入的合法增量值，不参与表单自动校验；form.checkValidity()和submit事件均不检查step违规；必须用JavaScript结合min、step及浮点误差处理主动校验。

step属性在中到底起什么作用

step 本身不阻止提交，它只约束用户能通过上下箭头或键盘输入“合法”的增量值。浏览器不会在表单提交前自动校验 step 是否被遵守——哪怕你设了 step="0.1"，用户仍可手动输入 1.0000001 并成功提交。

为什么form.checkValidity()对step无效

Chrome、Firefox 等主流浏览器在调用 form.checkValidity() 或触发 submit 事件时，默认不检查 step 违规（这是 HTML5 规范的遗留行为）。只有当字段同时设置了 min、max 和 step，且用户通过原生控件（如点击上下箭头）修改时，才可能触发 validity.stepMismatch；但手动输入绕过该检查非常容易。

• 即使 value="2.3" 而 step="0.5"，input.validity.stepMismatch 仍为 false
• input.reportValidity() 也不会弹出 step 相关错误提示
• 服务端永远不能信任这个约束

真正能拦截 step 违规的两种实操方式

必须靠 JavaScript 主动计算并干预：

DeepBI DHTML 页面生成器

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

下载

数值必须是 ${min} + N×${step} 的形式

• 别直接用 (val % step) === 0 —— 浮点运算会出错，比如 0.3 % 0.1 结果是 0.09999999999999998
• 一定要结合 min 偏移量，否则 step="2" 时 value="1" 会被误判为合法（实际应为 0, 2, 4…）
• 仅监听 change 不够，建议加 blur 和 submit 时双重校验

更稳妥的做法：放弃step，改用pattern+inputmode（针对移动端）

如果业务只要求“小数位数可控”，比如“最多一位小数”，step 反而难维护。直接用：

<input type="text" inputmode="decimal" pattern="\d+(\.\d{1})?" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1')">

• inputmode="decimal" 在 iOS/Android 键盘上唤出带小数点的数字键盘
• pattern 配合 reportValidity() 能真正阻断提交
• 避免浮点精度、min/step 组合逻辑等所有坑

step 属性看着省事，但真要拦住非法值，它连门槛都算不上。关键逻辑永远得自己算，而且得防住浮点、偏移、手动输入这三板斧。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！