<input type="number"> 无法阻止粘贴非法内容（如"123.45.67"）、Safari/安卓WebView忽略step="0.01"、允许输入e/+/-等字符，仅适合简单数值采集，必须配合后端校验；金额等精确场景应改用type="text"+正则+事件双层过滤。
用 input type="number" 会踩哪些坑
直接写 <input type="number"> 看似合理，但实际无法阻止用户粘贴非法内容（比如 "123.45.67" 或 "￥100"），且在 Safari 和部分安卓 WebView 中会忽略 step="0.01" 导致小数位校验失效。更关键的是，它不拦截非数字字符的键盘输入（如 e、+、- 在某些场景下仍能输入），根本达不到“金额格式控制”的目的。
所以别依赖 type="number" 做格式校验，它只适合简单数值采集，且必须配合后端二次验证。
用 input type="text" + 正则 + 键盘拦截更可靠
金额输入的核心诉求是：允许最多两位小数、可选负号、禁止前导零（除 "0" 和 "0.x" 外）、实时过滤非法字符。推荐用 type="text"，配合 input 和 keydown 事件做双层防护：
-
keydown拦截明显非法按键（如q、!、Tab在输入中不该触发格式处理） -
input事件里用正则清洗值：^(-?\d+\.?\d{0,2})$匹配合法结构，再额外处理"."开头、多个小数点、"00"开头等情况 - 注意：不要在
input里直接value = newValue后把光标推到末尾——用户在中间修改时体验极差；应保存并恢复selectionStart/selectionEnd
示例关键逻辑：
立即学习“前端免费学习笔记（深入）”；
input.addEventListener('input', e => {
let v = e.target.value;
// 先剔除非数字、非点、非负号
v = v.replace(/[^-\d.]/g, '');
// 确保最多一个小数点
const dotIndex = v.indexOf('.');
if (dotIndex !== -1 && v.indexOf('.', dotIndex + 1) !== -1) {
v = v.slice(0, dotIndex) + v.slice(dotIndex).replace(/\./g, '');
}
// 小数点后最多两位
if (dotIndex !== -1 && v.length > dotIndex + 3) {
v = v.slice(0, dotIndex + 3);
}
// 禁止 "-."、"-.1"、"00"、"-00"
if (/^-?\./.test(v) || /^-?0\d/.test(v)) {
v = v.replace(/^(-?)0+(\d)/, '$1$2');
}
e.target.value = v;
});
为什么不用 pattern 属性做前端校验
pattern 只在表单提交时触发，对实时输入无效，用户输完一长串非法内容（如 "12..34.5.6"）才报错，体验断裂。而且 pattern 不支持动态更新，无法根据是否允许负号、是否必填等条件灵活切换规则。更重要的是，pattern 校验失败时浏览器只显示模糊提示（如 “请匹配所要求的格式”），无法精准定位问题（比如“小数位不能超过两位”）。它适合做提交兜底，不适合做输入控制。
真正要做的，是让用户「输不进去」，而不是「输完再骂他」。
后端必须重新解析并校验字符串
前端所有拦截都可被绕过（禁用 JS、手动改 DOM、curl 提交）。后端收到的值一定是字符串，必须用服务端语言原生的数字解析函数处理，例如 Python 的 decimal.Decimal() 或 Java 的 BigDecimal，而不是 float —— 否则会出现 0.1 + 0.2 !== 0.3 这类精度灾难。同时要检查字符串是否符合正则 ^-?\d+(\.\d{1,2})?$，拒绝 "123."、"123.456"、"12e3" 等非法形式。
最易被忽略的一点：金额字段通常有业务含义（如“不得为负”、“不得为零”、“上限 99999999.99”），这些规则前端可以提示，但必须在后端强制执行，且错误信息要明确返回具体限制条件。
