可通过设置input的step="0.01"配合type="number"限制金额为0.01倍数，建议添加min、pattern正则校验及JavaScript失焦时四舍五入修正，并注意浏览器兼容性与服务端最终校验。
可以通过设置 input 标签的 step 属性为 "0.01"，并配合 type="number" 和合适的 min、max（可选）来限制金额输入必须是 0.01 的倍数。
基础写法：指定 step="0.01"
这是最核心的一步。浏览器会据此校验用户输入或点击上下箭头时的数值是否符合步进规则：
-
step="0.01"表示允许的值只能是0, 0.01, 0.02, ..., 1.99, 2.00等形式 - 必须搭配
type="number"，否则step在多数浏览器中不生效 - 建议同时设置
min="0"（或其它合理下限），避免负数金额
增强校验：添加 pattern + title（防绕过）
仅靠 step 无法阻止用户手动输入如 1.005 或 1.001 这类非法值（部分浏览器允许失焦后才报错）。可补充正则约束：
- 使用
pattern="^\d+(\.\d{2})?$"要求最多两位小数（如123、45.67，但不允许89.1或10.001） - 加上
title="请输入两位小数的金额，例如：12.34"提供友好提示 - 注意：
pattern仅对type="text"生效；若坚持用type="number"，需用 JavaScript 补充实时校验
JavaScript 辅助：失焦时自动修正
为提升体验和兼容性，可在用户输入完成后自动四舍五入到分（0.01）：
- 监听
blur或change事件 - 将值转为数字，乘以 100 → 四舍五入 → 除以 100 → 保留两位小数
- 示例代码：
input.addEventListener('blur', () => {<br> const val = parseFloat(input.value);<br> if (!isNaN(val)) {<br> input.value = (Math.round(val * 100) / 100).toFixed(2);<br> }<br>});
注意事项与兼容性
不要依赖 step 属性单独完成强校验，因为：
- 某些浏览器（如旧版 Safari）对
step支持不完善 - 用户粘贴、拖拽、脚本赋值等行为可能绕过 step 限制
- 服务端仍需做最终校验，防止恶意绕过
- 移动端软键盘可能不显示小数点，可考虑加
inputmode="decimal"提升体验
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
