pattern仅支持字符串格式匹配，无法校验数值范围、逻辑分支及业务规则（如后两位01–40、班级离散区间、禁用00结尾），必须用JavaScript提取字段、转数字、分组判断并处理边界情况。
HTML 本身不支持直接用正则表达式做「校验逻辑」，pattern 属性只是把正则交给浏览器做基础匹配，真正要校验学号规则（比如班级范围、后两位不能超40、不能以00结尾），必须配合 JavaScript 手动控制。
为什么 pattern 单独不够用
浏览器的 pattern 只做字符串格式匹配，不支持数值范围判断或逻辑分支。例如：学号后两位要求是 01–40，但 pattern="\d{2}" 会放行 00、99；又比如班级号 71–73 和 81–82 是离散区间，纯正则虽能写（如 7[1-3]|8[1-2]），但可读性差、难维护，且无法和后两位联动校验（比如 7141 就该错）。
常见错误现象：
• 输入 20207141，pattern 没报错，但业务上已超班级人数上限
• 输入 20201500，pattern 通过，但学号不允许以 00 结尾
• 表单提交时看似“验证通过”，实际后端还得兜底，前端校验形同虚设
pattern 仅适合做第一层格式过滤
可以用它快速筛掉明显非法输入（如长度不对、含字母、少位数），减轻 JS 处理负担。对 2020 级八位学号，建议这样写：
input type="text" pattern="^2020(61|1[1-7]|7[1-3]|8[1-2])\d{2}$" title="学号格式：2020+学院班级+两位序号"
说明：
• ^2020 锁死年份前缀
• (61|1[1-7]|7[1-3]|8[1-2]) 覆盖软件学院（11–17、61）、物联网（71–73）、数据科学（81–82）
• \d{2} 保证末两位是数字（但不校验值域）
• 不加 $ 或写错锚点会导致部分匹配（如 20201500x 也可能通过）
必须用 JavaScript 补全业务规则校验
在表单提交前或输入失焦时，用 JS 提取各段、转成数字、逐条判断。关键点：
- 用
substr()或解构提取字段比正则捕获组更直白，例如：a.substr(4, 2)取方向+班级码，a.substr(6, 2)取序号 - 序号必须转
parseInt()后判断：num >= 1 && num （排除00） - 班级号需分组判断：
classCode === '61' || (classCode[0] === '1' && +classCode[1] >= 1 && +classCode[1] ，比写超长正则更易调试 - 别忘了检查字符串长度是否严格为 8 ——
pattern无法阻止用户粘贴 9 位内容后删掉一位，导致中间缺位
容易被忽略的边界细节
真实场景中，用户可能：
• 粘贴带空格或换行符的学号（需用 trim()）
• 输入全角数字（０１）导致 \d 匹配失败
• 在移动端触发多次 input 事件，JS 校验函数没做防抖，界面反复闪红
• 把 01 当作字符串处理，直接比较 === '01' 没问题，但若转成数字再转回字符串就丢了前导零
这些都不是正则能覆盖的，得靠 JS 主动清理和防御性编码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
