html input 的 pattern 属性仅支持前缀匹配且自动添加 ^$，不支持 \b、预查等高级正则特性；推荐金额模式为 [1-9]\d*(.\d{1,2})?|0(.\d{1,2})?，需配 title 提示，并辅以 javascript 实时清洗和后端严格校验。
HTML input 的 pattern 属性不支持完整正则语义
直接在 <input pattern="..."> 里写金额正则，很容易校验失败或漏判。因为 pattern 实际只做「字符串前缀匹配」，且隐式加了 ^ 和 $，但不支持 \b、^$ 锚点以外的边界控制，更不支持量词修饰符（如 g、m）或预查（?=）。常见错误是写成 pattern="^\d+(\.\d{1,2})?$"——这在 HTML 中会报错或静默失效。
实操建议：
- 删掉显式的
^和$，浏览器自动加上；只写核心模式，比如\d+(\.\d{1,2})? - 必须加
title属性，否则校验失败时无提示，例如title="请输入合法金额，最多两位小数" - 注意：空字符串、纯小数点（如
.）、负号开头（如-10）默认都会被pattern拒绝，除非你显式允许
金额正则的关键边界条件怎么写
真正能覆盖业务场景的金额格式，不是“数字+可选小数”，而是要排除 01.5（前导零）、10.（尾部点）、.5（缺整数位）等非法形式。推荐用这个模式：[1-9]\d*(\.\d{1,2})?|0(\.\d{1,2})?
说明：
-
[1-9]\d*匹配非零开头的整数部分（如1、123），避免012 -
0(\.\d{1,2})?单独处理0和0.5、0.00这类合法值 - 不支持
100.000（三位小数）或100.，因为\.\d{1,2}要求小数点后必须有 1–2 位数字 - 如果业务允许负金额，前面加
-?，但需同步改title提示，并确认后端是否接受
为什么光靠 pattern 不够，还得用 JavaScript 补校验
pattern 只在表单提交或调用 checkValidity() 时触发，用户输入过程中不会实时拦截。更关键的是：它无法识别粘贴进来的非法内容（如 10..5、10.5.6），也无法过滤掉全角数字、空格、逗号分隔符等常见干扰。
实操建议：
- 监听
input事件，用value.replace(/[^0-9.]/g, '')清洗非数字字符（注意保留一个点） - 用
parseFloat(value)+isNaN()做二次判断，比正则更可靠——比如"10."经parseFloat后是10，而"10..5"是NaN - 避免在
keydown中粗暴阻止.或数字键，会导致无法输入小数点或粘贴整段金额
后端必须重复校验，且不能依赖前端正则
前端任何正则或 JS 校验都可被绕过。比如禁用 JS、手动修改 DOM、用 curl 发请求。后端收到 amount 字段后，必须用服务端语言的严格解析逻辑再验一次。
典型错误：
- 只用
is_numeric()（PHP）或float.TryParse()（C#）——它们会把1e5、+100当作合法数字，但业务上这通常不算“金额” - 用和前端一模一样的正则——如果正则本身有漏洞（如没限制小数位数），前后端一起错
- 没考虑区域格式，比如欧洲用逗号当小数点（
10,5），但你的正则只认英文点
真正安全的做法是：先按业务定义明确“合法金额”的语义（如“非负、最多两位小数、无千分位”），再用语言原生类型转换 + 范围检查（>= 0 && ）双重确认。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
