step属性定义合法值序列而非过滤输入，校验仅在特定操作时触发，合法值需满足value === min + n×step；浮点步长应避免，金额须用整数单位；服务端必须二次校验step对齐及业务规则。
step 属性只定义合法值序列，不控制键盘输入行为
设 step="5" 后，用户仍可手动输入 7、12.3 或粘贴任意数字——浏览器只在点击上下箭头、调用 stepUp()/stepDown() 或提交时按该步长校验。它不是过滤器，而是数学约束：合法值必须满足 value === min + n × step（n 为整数）。
常见错误现象：min="0" + step="5" 下输入 3 不报错，但失焦后 Chrome 可能静默修正为 0 或 5，Firefox 则保留并提交失败；若初始 value="1"，箭头按钮直接失效。
- 务必显式设置
min，否则起点默认为0，易导致第一档值不符合业务（如想从5开始，应写min="5" step="5"） -
step="any"不是“关闭校验”，而是退化为 ±1 整数步进，且validity.stepMismatch永远为false - 浮点步长如
step="0.1"在 JS 中会因二进制精度产生0.30000000000000004，金额类场景必须用整数单位（如分）
input 事件中用 stepUp/stepDown 替代 parseFloat 加减
手动计算 parseFloat(val) + 0.1 必然引入浮点误差；正确做法是调用原生方法，它严格按当前 step 和 min 对齐，不经过 JS 运算。
示例：点击“+”按钮时
const input = document.querySelector('input[type="number"]');
document.getElementById('inc-btn').addEventListener('click', () => {
// 先确保当前值合法，再递增
if (input.checkValidity()) {
input.stepUp(1); // 严格按 step 增加 1 步
}
});
- 调用前必须保证
input.value已满足min + n×step，否则stepUp()可能跳到意外值 - 动态修改
step后，需立刻重置value：先input.value = ''，再设回合法值（如input.value = Math.round(parseFloat(input.value) / newStep) * newStep） - 禁用原生箭头后自定义按钮，可配合
disabled状态（如值已达max时禁用“+”）提升体验
粘贴、拖拽、滚轮等非键盘路径必须单独拦截
input 事件能捕获粘贴、拖拽、鼠标滚轮（若未禁用），但仅靠正则或范围判断不够——因为用户可能粘贴 "-5.7e2" 或 "1,000" 这类看似数字实则非法的字符串。
推荐校验逻辑：
- 用
/^-?\d*\.?\d*(e[+-]?\d+)?$/i初筛是否为合法数字字面量（允许科学计数法） - 再用
parseFloat()转换，检查是否isNaN()或超出min/max - 若非法，立即
event.preventDefault()并恢复上一次合法值（建议缓存lastValid） - 对滚轮误操作，可监听
wheel并e.target.blur()防止意外增减
服务端必须验证 step 对齐，前端无法替代
所有前端限制都可被绕过：step 的数学约束、input 事件监听、甚至整个 JS 文件都能被禁用或篡改。后端收到值后，必须重新计算：
(value - min) % step === 0（注意浮点安全：用整数运算或 Number.EPSILON 容差）
- 例如前端传
value=10.000000000000002，JS 里10.000000000000002 % 0.5不为 0，但人眼认为它是合法的——此时应做四舍五入或截断处理，而非直接拒绝 - 区块链投票等强一致性场景，
max值常来自链上动态读取，后端必须同步校验该值与当前链状态是否一致，不能只信前端传来的max - 最易忽略的一点：当
step="1"但业务要求“必须为偶数”，这种复合规则只能由后端判定，前端无通用解法
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
