html pattern 属性仅支持字符串匹配，无法校验数值语义；应优先使用 type="number" 配合 min/max/step，必要时用 javascript 的 input 事件 + setcustomvalidity() 做精确控制，并始终在服务端二次校验。
HTML 的 pattern 属性不支持范围校验，只能做字符串模式匹配
直接用 pattern 写 [0-9]{1,3} 或 \d{1,3} 看似能限制位数，但无法阻止用户输入 999 以外的三位数（比如 888 合法但超出业务要求的 0–100），更没法拒绝 000、012 这类带前导零的字符串——因为正则只管字符，不管数值语义。
常见错误现象：<input pattern="^[1-9][0-9]{0,1}$" title="请输入1-99的整数"> 表面限制了两位以内非零开头，但用户仍可输入 0（绕过 pattern）、100（三位但没被匹配）、甚至 05（浏览器可能接受，但语义非法）。
-
pattern是纯客户端字符串校验，不触发 JavaScript，也不解析数字 - 它对空格、前导零、负号（如
-5）等毫无约束力，除非你显式写进正则 - 不同浏览器对
pattern的触发时机不一致（有的失焦才校验，有的实时）
用 input 的 min/max + type="number" 是更可靠的基础方案
数值范围控制必须依赖浏览器原生数值语义，而不是字符串规则。把类型设为 number，再配合 min 和 max，才能让浏览器理解“这是数字，且应在某区间内”：
<input type="number" min="0" max="100" step="1">
这样做的实际效果：
- 移动端弹出数字键盘（而非全键盘）
- 输入
101后失焦，浏览器自动标红并提示“值必须不大于 100” -
step="1"禁止小数（否则用户可输0.5） - 用户粘贴
abc或100.1会被清空或截断（行为因浏览器而异，但至少不提交非法值）
注意：type="number" 不阻止用户输入 +、e、E 等符号（如 1e2 在部分浏览器被转为 100），若需彻底禁用，得加 JavaScript 拦截。
必须用正则？那就用 JavaScript 的 checkValidity() + 自定义 setCustomValidity()
如果业务强依赖正则（例如要兼容老浏览器、或需和已有正则库统一逻辑），不要把正则塞进 pattern，而是用 JS 做最终校验：
const input = document.querySelector('input[name="age"]');<br>input.addEventListener('input', () => {<br> const value = input.value.trim();<br> // 先确保是整数格式（无小数点、无字母、无前导零除非是单个0）<br> if (!/^(0|[1-9]\d*)$/.test(value)) {<br> input.setCustomValidity('请输入有效的正整数，不能有前导零');<br> return;<br> }<br> const num = Number(value);<br> if (num 100) {<br> input.setCustomValidity('请输入 0 到 100 之间的整数');<br> return;<br> }<br> input.setCustomValidity(''); // 清除错误<br>});
关键点：
- 用
input事件而非change，保证实时反馈 - 正则
^(0|[1-9]\d*)$显式允许0，拒绝00、01、-5 - 必须调用
setCustomValidity('')清空，否则后续合法输入仍报错 - 别忘了
trim()，防止用户输空格后正则不匹配
服务端永远要做二次校验，前端只是体验优化
无论你用 min/max、正则还是 JS 校验，所有这些都可在开发者工具里被轻易绕过。用户改 DOM、删属性、禁用 JS，都能提交任意值。
所以后端收到 age 字段时，必须独立做类型转换和范围判断：
- 先尝试转成整数（如 Python 的
int(val)，Node.js 的Number(val)） - 检查是否为
NaN、是否溢出、是否在 [0, 100] 区间内 - 不要信任
Content-Type或字段名，哪怕前端传的是 JSON，也要当字符串处理再解析
最容易被忽略的一点：前端校验常假设用户只输阿拉伯数字，但 Unicode 中存在全角数字（如 Ｑ、１）、连字字符（如 Ⅳ）、甚至数学符号（如 ①），这些在正则 \d 里可能被意外匹配，或在 Number() 中转成 NaN —— 服务端必须覆盖这些边界情况。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
