首选 type="number" 配合 min="-99"、max="99" 和 step="1" 实现[-99,99]整数范围验证，浏览器原生支持、无障碍友好、移动端调数字键盘；pattern 无法做数值比较且易出错，后端必须二次校验。
直接用 type="number" 配合 min 和 max 是最可靠、最省事的方式，浏览器原生支持、无障碍友好、移动端自动调出数字键盘——别一上来就写正则或 JS。
用 type="number" 实现 [-99, 99] 整数范围验证
这是首选方案。它不依赖 JavaScript，也不需要手写正则，所有主流现代浏览器（Chrome、Firefox、Safari、Edge）都已稳定支持。
-
min="-99"和max="99"会阻止用户提交超出范围的值，表单提交时自动拦截并弹出提示 - 必须显式加
step="1"，否则默认step="any"允许小数，比如输入5.5也能通过 - 用户仍可通过粘贴、开发者工具修改绕过，所以后端必须做二次校验——但前端这层已经拦掉了 95% 的误输
- 注意：Safari 对
type="number"的pattern属性完全忽略，所以别混着用pattern和type="number"
<input type="number" name="score" min="-99" max="99" step="1" required>
为什么不用 pattern 验证数字范围
因为 pattern 只能匹配字符串，不能做数值比较。你写 pattern="-?[0-9]{1,2}" 看似能覆盖 -99 到 99，但它会错误地接受 -00、099、999（三位数）、甚至 --9（如果没加 ^ 和 $）。
-
pattern适合格式约束（如“必须是两位数字”），不适合数值区间逻辑 - 要真正表达“-99 到 99”，得写超长正则：
^-?(?:[0-9]|[1-9][0-9]|99)$，可读性差、易出错、难维护 - 更关键的是：即使正则写对了，
type="text"下用户仍可输入字母再删掉，触发验证前界面无反馈；而type="number"从根源上限制输入字符集
需要兼容旧浏览器或特殊交互时怎么办
当项目必须支持 IE11 或需要自定义错误文案、实时反馈（比如输入 100 立即标红），就得补 JS。
- 监听
input事件，用parseInt()转换并判断是否在 [-99, 99] 内，再调用setCustomValidity() - 不要只监听
change或blur，否则用户输到一半就提交会漏判 - 避免用
valueAsNumber，它在空值或非法字符串时返回NaN，容易引发隐式转换 bug - 示例关键逻辑：
if (num 99) input.setCustomValidity("请输入 -99 到 99 之间的整数"); else input.setCustomValidity("")
真正麻烦的不是怎么写验证，而是忘了 step="1" 导致小数被接受，或者以为 pattern 能替代数值校验——这两点在代码审查里高频出现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
