step 属性仅对 number、range、date 等特定 input 类型生效，对 text 或 email 无效；需与 min/max 协同使用才能约束输入，且无法替代服务端校验。
step 属性只对特定 input 类型生效
step 不是万能的，它只在 type="number"、type="range"、type="date"、type="month"、type="week"、type="time" 和 type="datetime-local" 上起作用。对 type="text" 或 type="email" 设置 step 完全无效，浏览器会忽略——这点常被误用。
常见错误现象：用户输入小数后提交失败，但表单没报错，实际是后端校验拦截了；根源往往是前端用了 step="1" 却没配 min/max，导致用户仍可手动输入非步进值（比如输入 3.5 而 step="1" 本意只允许整数）。
-
step="any"允许任意精度数值（如1.23456789），适合需要高精度但又不强制固定小数位的场景 -
step="0.01"常用于金额，配合min="0"和value="0.00"可约束用户只能输两位小数（但注意：仍可粘贴非法值，需服务端兜底） - 日期类中
step="7"在type="date"下无意义（日期步进单位是天，step实际被忽略），但在type="week"中才真正表示“隔周选择”
step 和 min/max 必须协同使用才有效
单独写 step="5" 不会阻止用户输入 7；只有加上 min="0" 和 max="100"，浏览器才会在点击上下箭头时按 5 递增/递减，并在输入框失去焦点时自动修正越界或非步进值（部分浏览器如 Chrome 会四舍五入到最近合法值，Firefox 则可能清空）。
实操建议：
- 始终显式声明
min和max，哪怕只是逻辑边界（如min="1"表示“至少选 1 个”） - 避免
step="0"—— 这是无效值，会导致整个step行为退化，等价于未设置 - 对货币字段，用
step="0.01"+min="0"+inputmode="decimal"（提升移动端数字键盘体验）
step 对 range 输入控件的影响最直观
type="range" 是唯一一个把 step 视为“滑块最小移动单位”的类型。设 min="0"、max="100"、step="10"，滑块就只能停在 0、10、20…100 这些刻度上，视觉和交互都受控。
容易踩的坑：
- 不要依赖
step实现“离散选项”——它不生成标签或提示，用户看不到可选值；需配合output元素或 JS 动态显示当前值 -
step="any"在range中会让滑块变成连续调节，失去所有离散约束，慎用 - 移动端 range 滑块响应区域小，建议加 CSS 扩大点击热区，否则
step再准也难操作
step 无法替代服务端校验和格式化
浏览器对 step 的执行是松散的：用户可以粘贴、拖拽、用开发者工具改 DOM，绕过所有限制。你看到的“自动修正”只是 UI 层的友好提示，input.value 仍可能是非法值。
关键点：
- 提交前必须用 JS 校验：
parseFloat(input.value) % parseFloat(input.step) === 0（注意浮点误差，建议用Number.EPSILON比较） - 服务端收到数据后，必须重新解析并验证是否符合步进规则，不能信任前端传来的任何值
- 如果需要精确控制显示格式（如金额补零），
step无能为力，得靠inputmode+ 格式化事件（input或blur）+ 后端统一处理
最常被忽略的是浮点精度问题：step="0.1" 在二进制下无法精确表示，可能导致 0.30000000000000004 这类值出现；涉及金融场景务必用整数单位（如“分”）存储和计算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
