HTML input 的 pattern 不能真正校验小数精度，仅作提交前客户端匹配且不支持浮点语义校验；应结合 input 事件与 JavaScript 校验，优先用 parseFloat() + isFinite() 判断合法性，并按需补充位数、前导零等业务规则。
HTML input 的 pattern 不能真正校验小数精度
直接在 <input pattern="..."> 里写正则，看似能限制输入，但实际只做表单提交前的客户端匹配，且不支持浮点数的语义校验（比如 "01.5"、"1."、"-.5" 这类边界情况容易漏判）。更关键的是：pattern 不触发实时验证，用户可绕过（如粘贴非法值后不离开焦点）。
真正可控的做法是结合 input 事件 + JavaScript 校验，pattern 仅作辅助提示。常见错误是把正则写成 ^\d+\.\d+$，它会拒绝 "0.5"（因为 \d+ 要求至少一位整数），也接受 "123.456.789"（没锚定结尾）。
- 正确锚定：必须用
^和$包裹整个模式 - 允许可选整数部分：用
\d*或\d{0,}，但需防空字符串，所以常配合^(\d+\.?\d*|\.\d+)$ - 若要求「必须有小数位」，用
^\d+\.\d+$；若允许整数，改用^\d*\.?\d+$（但注意"."会被接受，得额外排除）
parseFloat() + isFinite() 是最稳妥的运行时校验方式
正则易出错，而浏览器原生解析函数已处理了各种边缘 case：前导零、科学计数法、空格、符号、溢出等。只要不是纯正则癖好者，优先用 JS 解析再判断。
例如：
立即学习“前端免费学习笔记（深入）”；
function isValidDecimal(str) {
const num = parseFloat(str);
return isFinite(num) && str.trim() !== '' && !isNaN(num);
}
注意这三要素缺一不可：isFinite() 排除 Infinity 和 NaN，trim() !== '' 防空串，!isNaN() 补防某些旧环境对 parseFloat(" ") 返回 0 的异常。
-
parseFloat("01.5")→1.5（合法） -
parseFloat(".5")→0.5（合法） -
parseFloat("1.")→1（合法，但业务上可能要拒绝，需额外检查是否含小数点） -
parseFloat("1e2")→100（合法，若业务禁科学计数法，需先用正则过滤/e/i）
需要精确位数控制？别依赖正则，用 toFixed() 或正则分步校验
比如「最多两位小数」这种需求，用正则硬写 ^\d+(\.\d{1,2})?$ 看似可行，但会误伤 "123.450"（末尾零）或放行 "000.12"（前导零）。更可靠的是：先通过 parseFloat 得到数值，再转成字符串并按小数点分割判断位数。
示例逻辑：
function hasAtMostTwoDecimals(str) {
const num = parseFloat(str);
if (!isFinite(num)) return false;
const [_, decimals] = str.split('.');
return !decimals || decimals.length <= 2;
}
- 这里用原始字符串
str.split('.')而非num.toFixed(2)，是为了保留用户输入意图（比如"1.00"和"1"语义不同） - 若需自动标准化（如存库前截断），再用
Number(num.toFixed(2))，但注意toFixed在某些老 Chrome 中对1.005返回"1.00"（舍入误差） - 服务端仍需重复校验——前端任何正则或 JS 都可被绕过
移动端 inputmode="decimal" 比正则更实用
在支持的设备上（iOS 12.2+、Android Chrome 76+），<input inputmode="decimal"> 会唤起带小数点的软键盘，显著降低用户输入错误概率。它不替代校验，但能减少 80% 的格式错误场景。
搭配使用建议：
- 始终设置
type="text"（而非number，因后者在 iOS 上会忽略pattern且无法阻止粘贴） - 加上
inputmode="decimal"提升体验 - 再用上述
parseFloat+isFinite做最终判定 - 避免同时设
pattern和inputmode冲突（如 Safari 对pattern的实现较弱）
真正难的不是写出一个“看起来能用”的正则，而是覆盖所有用户可能糊弄你的输入方式——比如粘贴、拖拽、IME 输入、长按粘贴板、屏幕阅读器注入。校验逻辑越贴近数据本质（数值），越不容易翻车。
