最可靠方案是在 submit 事件中清洗 input.value 并调用 event.preventdefault() + this.submit()；input 事件适合实时修正，但不能替代 submit 阶段清洗；后端必须独立校验、转换并拒绝非法输入。
表单提交时用 submit 事件清洗 value 最可靠
pattern 和 type="number" 都不拦提交前的非法字符，真正能干预提交行为的只有 submit 事件。在这个时机修改 input.value，再调用 event.preventDefault() + this.submit()，才能确保后端收到的是干净值。
常见错误现象：pattern="/^\d+$/" 加了但用户照样提交 "12a"；type="number" 的 value 在 Safari 中可能是 "12.3.4"，valueAsNumber 直接返回 NaN，但字符串值仍被发出去。
- 必须在
submit事件里做清洗，不能只靠change或blur—— 用户可能没失焦就点了提交按钮 - 清洗逻辑要覆盖空字符串、全角数字、科学计数法残留（如 "1e2"）、首尾空格、零宽字符（
\u200b） - 清洗后记得调用
event.preventDefault()，否则原表单会按原始值提交一次 - 清洗完用
this.submit()触发干净提交，避免递归触发 submit 事件
input 事件实时过滤比 keydown 更全面
keydown 只能拦按键，对粘贴、拖入、IME 输入、自动填充完全无效；input 是唯一能覆盖所有输入路径的事件。但它不是“阻止”，而是“修正”——每次输入后立刻用正则清理非法字符。
使用场景：金额、邮编、手机号等字段需要视觉上“看不到字母”的体验，且不能破坏光标位置或输入法状态。
- 正则推荐：
/[^0-9.-]/g（允许负号、小数点），但需额外逻辑防止多个小数点或负号出现在中间，比如先replace(/[^0-9.-]/g, '')，再replace(/(\..*)\./g, '$1').replace(/^(-).+(-)/, '-') - 不要在
input里直接trim()，会把用户正在输的中间空格（如姓名“张 三”）也干掉；首尾空格清洗应留在submit阶段 - 移动端要注意：iOS Safari 对
inputmode="decimal"响应不稳定，不能依赖它替代 JS 过滤 - 如果用了 Vue/React，别在
v-model或onChange里实时改值，容易导致光标跳脱；统一收口到表单级提交逻辑中
valueAsNumber 不是过滤工具，只是读取辅助
valueAsNumber 是只读属性，不能用来“转换”或“修复”输入值。它对格式极其敏感：空字符串、带空格、末尾小数点、全角数字、科学计数法都会让它返回 NaN，但 input.value 字符串本身不受影响。
性能影响：频繁读取 valueAsNumber 没有额外开销，但它无法帮你拦截或清洗，误用反而掩盖真实输入问题。
- 想安全转数字，优先用
parseFloat(input.value.trim())，它比valueAsNumber容错更强（例如 "12.3abc" → 12.3） - 校验是否为有效数字，不要只看
isNaN(input.valueAsNumber)，而应结合/^-?\d*\.?\d+$/.test(input.value.trim()) - Safari 和 Chrome 对同一输入的
valueAsNumber表现可能不同，比如 "7." 在 Safari 返回NaN，Chrome 可能返回 7 - 后端永远不要信任前端传来的数字类型——
req.body.price拿到的仍是字符串，必须重新parseFloat并校验范围
后端才是最终防线，前端清洗全是体验优化
任何前端过滤都能被绕过：禁用 JS、用 Postman 发请求、浏览器开发者工具改 DOM、curl 提交原始数据。所以前端做的所有清洗，都只是让用户少点几次报错，而不是安全边界。
容易踩的坑：以为加了 pattern 和 type="number" 就万事大吉，结果后端直接用 parseInt(req.body.age) 处理 "18abc"，得到 18 而不是报错；或数据库字段是 INT，却收到 "12a" 导致插入失败。
- 后端必须独立做三件事：类型转换（
parseFloat或int()）、范围校验（min/max）、格式校验（正则匹配纯数字） - 不要复用前端正则——比如前端用
/^-?\d*\.?\d*$/允许空字符串，后端应拒绝空值并返回明确错误 - 对关键字段（如金额、ID），建议后端用白名单正则，比如
/^-?\d+(\.\d{1,2})?$/限定两位小数 - 日志里记录原始输入值，方便排查“为什么用户说输的是数字，后端却收到字母”这类问题
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
