html input 的 pattern 属性仅支持无分隔符、无标志的正则字符串，自动锚定，正确写法为 pattern="\d+(\.\d{1,2})?"（去首尾^$），但无法阻止.12等非法输入，需js补充校验并后端严格验证。
HTML input 的 pattern 属性不支持完整正则功能
直接在 <input pattern="..."> 里写类似 /^\d+(\.\d{1,2})?$/ 是无效的——pattern 只接受**不带分隔符的正则字符串**，且默认锚定（即自动加 ^ 和 $），不能用 flags（如 g、m），也不支持 \d 在某些旧浏览器中退化为 [0-9] 以外的 Unicode 数字。
常见错误现象：pattern="^\d+(\.\d{1,2})?$" 看似合理，但实际会因开头的 ^ 和结尾的 $ 被重复添加而失效；更隐蔽的是，它允许空字符串或纯小数点（如 .）通过校验，因为浏览器只做字符串匹配，不执行 JS 式的严格解析。
- 正确写法是去掉
^和$：pattern="\d+(\.\d{1,2})?" - 但这样仍无法阻止用户输入
123.或.45——需配合step和type="number"或改用 JS 补充校验 -
type="number"下pattern实际被忽略，此时 pattern 完全失效
用 type="text" + pattern 限制小数位数（最简可行方案）
适用于表单提交前的轻量级提示，不追求 100% 阻断，但能覆盖多数误输。关键在于构造一个仅匹配「整数」或「整数.最多两位数字」的字符串模式，且排除孤立小数点。
推荐正则字符串：\d+(\.\d{1,2})?
- ✅ 匹配：
0、123、45.6、78.90 - ❌ 不匹配：
.、12.、34.567、-12.3、abc - 注意：不支持负数，如需支持，改用
-?\d+(\.\d{1,2})?，但要小心-.5这类边界情况 - 在 HTML 中写成：
<input type="text" pattern="-?\d+(\.\d{1,2})?" title="请输入最多两位小数的数字">
真正可靠的校验必须用 JavaScript 监听 input 或 blur
pattern 只是辅助，浏览器不会阻止非法输入，只在提交时弹提示。要实时过滤、修正或禁用非法字符，必须用 JS。
典型做法是在 input 事件中用 parseFloat() + toFixed(2) 截断，但要注意：parseFloat("12.345") → 12.345，toFixed(2) → "12.35"（四舍五入），这不是截断。若需截断（非四舍五入），得手动处理字符串：
input.addEventListener('input', e => {
let v = e.target.value;
const match = v.match(/^(-?\d*\.?\d{0,2})/);
if (match) e.target.value = match[1];
});
- 该正则
^(-?\d*\.?\d{0,2})允许空、负号、小数点前后最多两位有效数字，边输边裁剪 - 但会放行
.和-.，所以最好再加blur时二次清理：v.replace(/\.+$/, '').replace(/^-?\.$/, '') - 注意：不要在
input中直接e.target.value = ...后再e.target.setSelectionRange()，否则移动端光标会跳到末尾
后端永远要重新校验，前端正则只是用户体验层
无论 pattern 写得多严谨，或 JS 拦截多及时，HTTP 请求都能绕过所有前端逻辑。比如用 curl 发送 amount=999.999，前端校验形同虚设。
所以服务端收到字段后，必须独立做类型转换和精度检查：
- Node.js：
const num = parseFloat(req.body.amount); if (isNaN(num) || !/^-?\d+(\.\d{1,2})?$/.test(req.body.amount)) {...} - Python：
re.match(r'^-?\d+(\.\d{1,2})?$', amount_str)，而非依赖float(amount_str)—— 因为float("12.345")成功但业务要求只收两位 - 数据库字段建议用
DECIMAL(10,2)类型，让 DB 层兜底精度
最容易被忽略的一点：JS 的 Number 类型有浮点精度问题，0.1 + 0.2 !== 0.3。涉及金额等场景，小数位数校验只是第一步，后续计算务必用整数单位（如“分”）或专用库（如 decimal.js）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
