HTML中pattern属性仅对text类input有效，type="number"会忽略它；校验年龄需结合max/min属性与JavaScript数值解析和范围判断，后端验证必不可少。
HTML input 的 pattern 属性不校验年龄逻辑，只做字符串匹配
直接在 <input type="number"> 上加 pattern 是无效的——pattern 只对 type="text"（及 email、url 等）生效，而 type="number" 会忽略它。想用正则“校验年龄范围”，本质是校验“输入是否为 1–120 之间的整数字符串”，不是数学判断。
用 pattern="^(1[0-9][0-9]|[1-9]?[0-9])$" 匹配 0–120（但需注意语义）
这个正则能匹配 0 到 120 的所有整数字符串，不含前导零（如 05 不匹配），也不含小数点或负号：
-
^和$确保整个输入都被匹配，防止用户输120abc -
1[0-9][0-9]匹配100–199，但我们要的是 ≤120，所以实际应写成1[0-2][0-9]|120？不对——更稳妥的是拆解：1[0-1][0-9]|120|[1-9]?[0-9] - 但多数场景下，年龄不会真要求精确到 120，且
120极少出现；更常用、更简洁、也更安全的是：pattern="^(1[0-2][0-9]|[1-9]?[0-9])$"，它覆盖0–129，再配合max="120"（对type="number"有效）做二次限制
所以真正实用的写法是分两层：
<input type="number" min="1" max="120" required>
——浏览器原生控件已能阻止非数字、超界值；若必须用文本框+正则（比如要兼容某些表单库），才用：
立即学习“前端免费学习笔记（深入）”；
<input type="text" pattern="^(1[0-2][0-9]|[1-9][0-9]|[1-9])$" title="请输入1-120之间的整数">
JavaScript 补充校验才是可靠方案
仅靠 pattern 或 min/max 都不可信：用户可绕过前端、粘贴非法值、或禁用 JS 后提交。真实项目中必须在提交时用 JS 做数值解析和范围判断：
- 先用
parseInt(input.value, 10)转整数，避免"18abc"被pattern放过但 JS 解析成18 - 检查是否为有效数字：
!isNaN(age) && isFinite(age) - 再判断范围：
age >= 1 && age <= 120 - 注意：空字符串、
" "、"0"都需按业务规则处理（比如年龄通常从1起算）
容易被忽略的边界：空值、0、非整数、全角数字
pattern 对全角数字（如 Ｏ、１、２）完全无效；parseInt 也无法识别它们。如果业务要支持国际化输入，得先做 Unicode 正规化或显式替换。另外，很多开发者以为 min="1" 就能挡住 0，但在 type="text" 下它根本不起作用；而 type="number" 允许输入 0，除非你同时设 min="1" 并用 JS 拦截提交。
真正卡住年龄范围的地方，从来不在 HTML 属性里，而在提交那一刻的 JS 判断和后端验证。
