HTML input 的 pattern 属性无法可靠校验小数点数字，应结合 pattern 粗筛与 JS 细校验；推荐用 parseFloat + isNaN + 字符串比对，并注意科学计数法、前导零、空格及移动端兼容性问题。
HTML input 的 pattern 属性不支持小数点校验的完整逻辑
直接在 里写正则想精确匹配带小数点的数字，大概率会失败——因为 pattern 只做字符串全量匹配（隐式加 ^ 和 $），但不处理空值、前后空格、科学计数法等边界，更不校验数值合法性（比如 "01.5" 或 "1..2" 会被误判为合法）。
真正可靠的做法是：用 pattern 做粗筛 + JS 做细校验。例如：
<input type="text" pattern="-?\d+(\.\d+)?" title="请输入有效数字">
这个正则只拦住明显非法格式（如字母、多个小数点），但放行了 "00.0"、"1."、"-." 等无效输入——这些必须交由 JS 判断。
JavaScript 中用 parseFloat + isNaN 校验最稳妥
别信网上那些“一行正则搞定”的方案。真正生产环境该用 parseFloat() 配合 isNaN() 和字符串比对，原因有三：
-
parseFloat("123.")返回123，但用户本意可能是输错了，应视为无效 -
parseFloat("1e2")返回100，但多数业务场景不接受科学计数法 - 正则很难兼顾负数、前导零、小数位数限制等组合条件
推荐校验函数：
function isValidDecimal(str) {<br> if (!str || typeof str !== 'string') return false;<br> const num = parseFloat(str);<br> return !isNaN(num) && String(num) === str.trim();<br>}
它能正确拒绝 "1."、"01.5"、" 1.2 "（因 String(num) 是 "1.2"，而 str.trim() 是 "1.2 " → 不等）、"1e2"。
需要限制小数位数？别硬塞进正则，用 Number.toFixed() 截断或自定义校验
如果业务要求“最多两位小数”，用正则 ^-?\d+(\.\d{1,2})?$ 看似简洁，但会错误拒绝 "1.00"（合法）或放行 "1.000"（超长）。更可控的方式是：
- 允许用户自由输入，提交时用 JS 提取数字再截断：
Number(value).toFixed(2) - 或严格校验位数：
/^-?\d+(\.\d{1,2})?$/.test(value) && !value.includes('e') - 注意：
toFixed()会四舍五入，金融场景需用整数运算或专用库
input type="number" 的 valueAsNumber 已内置基础校验，但兼容性有坑
直接用 最省事，它的 valueAsNumber 属性天然过滤非数字输入（包括 "1.2.3"、"abc"），且自动处理空值和空格。
但要注意：
- Safari 旧版本不支持
valueAsNumber，需降级到parseFloat(input.value) - 用户可手动输入
"1e2"，此时valueAsNumber仍返回100，需额外检查input.value是否含e或E - 移动端软键盘可能不弹出小数点（尤其安卓 Chrome），建议加
inputmode="decimal"
所以最终上线前，务必在真机上测一遍小数点输入流程——这是最容易被忽略的环节。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
