type="number"不能替代格式校验，它仅触发数字键盘且不校验小数位数、整数位数、正负号或科学计数法；pattern对number类型无效，须改用type="text"+pattern+inputmode="decimal"+title，并配合required、实时事件监听与setcustomvalidity正确管理状态。
type="number" 不能替代格式校验
加了 type="number" 只是让浏览器调出数字键盘、阻止非数字字符输入（部分浏览器允许粘贴字母），但**完全不校验小数位数、整数位数、是否允许负号或科学计数法**。比如用户输入 "123.456"、"-42"、"1e3"，type="number" 全部放行，而你的业务可能只要“最多3位整数+2位小数的正数”。
pattern 属性对 number 类型完全无效
pattern 只在 type="text"、type="email" 等字符串类输入上生效；一旦设成 type="number"，浏览器会直接忽略 pattern，连控制台都不报错。所以别写：
<input type="number" pattern="[0-9]{1,3}(\.[0-9]{1,2})?">
这行代码里的 pattern 形同虚设。
- 正确做法：改用
type="text"，再靠pattern+ 正则约束 - 必须加
inputmode="decimal"（移动端调出带小数点的数字键盘） - 配合
title提供用户友好的提示，如title="请输入最多3位整数和2位小数" - 正则里点号要转义：
\.，否则.会匹配任意字符
推荐正则与实际限制场景对照
以下正则都基于 type="text"，且浏览器自动包裹 ^$，写时不用重复加：
- “正数，最多3位整数+2位小数” →
pattern="[0-9]{1,3}(\.[0-9]{1,2})?" - “允许0开头，但不能全为0（如001.23合法，000.00非法）” → 改用 JS 配合
setCustomValidity()，因为纯 pattern 很难表达“非全零”逻辑 - “必须含小数点，且固定2位” →
pattern="[0-9]{1,3}\.[0-9]{2}" - “禁止前导零（如123合法，0123非法）” →
pattern="([1-9][0-9]{0,2}|0)(\.[0-9]{1,2})?"，但注意0.5合法，00.5不合法
所有这些正则都需搭配 required，否则空值也能通过 pattern 校验（因为 pattern 只管“有内容时是否匹配”，不管“有没有内容”）。
需要实时反馈？别只靠 submit 触发
原生 pattern 只在表单提交时校验，用户输错后没提示。要实时反馈，必须手动干预：
- 监听
input或blur事件 - 调用
input.checkValidity()判断当前值是否满足pattern和required - 校验失败时，用
input.setCustomValidity("错误提示")；成功时务必调用input.setCustomValidity("")清空旧状态，否则后续永远报错 - 不要依赖
input.value === ""判断空值，改用input.validity.valueMissing，它才是标准依据
最易被忽略的是清空 setCustomValidity —— 一次没清，整个字段就卡死在“验证失败”状态，哪怕用户已输对，也提交不了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
