html5 input type="number" 无法直接强制两位小数，需结合 step="0.01"、min/max 限定范围，并通过 input 事件用 tofixed(2) 实时格式化、blur 事件兜底校验，且服务端必须二次验证小数位与数值范围。
HTML5 的 input type="number" 本身不支持直接强制保留两位小数，但可以通过组合 step、min、max 属性与 JavaScript 校验，实现「用户只能输入合法的两位小数价格」的效果。关键在于：用 step="0.01" 定义最小变化单位，并配合格式化与输入拦截。
设置 step="0.01" 并限定范围
这是基础控制。浏览器会限制用户通过上下箭头或键盘输入时的增量步长为 0.01，同时避免出现三位小数（如 1.234）被直接接受的情况：
注意：min 和 max 建议显式设定，防止用户输入过大数值或负数；value 初始值也建议写成两位小数形式（如 "0.00"），提升一致性。
用 input 事件实时格式化显示
仅靠 step 无法阻止用户粘贴或手动输入 1.5（变成 1.50）或 2（变成 2.00）。需监听 input 事件，自动补零并校验：
- 将输入值转为数字再转回字符串，用
.toFixed(2)强制两位小数 - 过滤非法字符（如多个小数点、字母），只保留数字和最多一个点
- 若值为空或非数字，设为
"0.00"
<script><br> const input = document.getElementById('price');<br> input.addEventListener('input', () => {<br> let val = input.value.trim();<br> if (!val) { input.value = '0.00'; return; }<br> const num = parseFloat(val);<br> if (isNaN(num)) { input.value = '0.00'; return; }<br> // 限制在合法范围内，并保留两位小数<br> const clamped = Math.min(Math.max(num, 0), 999999.99);<br> input.value = clamped.toFixed(2);<br> });<br> </script>
补充 blur 时的最终校验（防绕过）
用户可能跳过输入框而不触发 input（比如直接失焦），因此在 blur 时再做一次兜底处理：
- 检查当前值是否符合两位小数格式（正则
/^\d+(\.\d{2})?$/） - 若不符合（如只有
"1."或"1.2"），自动补零为"1.20" - 确保值仍在
min/max范围内
服务端仍需校验，不可依赖前端
所有前端控制都可被绕过（禁用 JS、修改 DOM、抓包重发等）。后端接收时必须：
- 解析为浮点数或定点数（如 Python 的
Decimal、Java 的BigDecimal） - 验证小数位 ≤ 2，且数值在业务允许范围内
- 存储时统一用分（整数）或带精度的定点类型，避免浮点误差
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
