工号校验不能仅依赖pattern正则，需结合oninput实时清洗、title提示及后端最终校验；pattern自动添加^$，勿重复书写；大小写、粘贴、超长等场景须前端主动处理。
工号校验不能只靠 pattern 写个正则就完事——浏览器对 pattern 的匹配行为是“全字符串强制匹配”，但工号常有前缀、长度浮动、大小写敏感等隐性规则，直接套用容易漏判或误拦。
pattern 属性里写什么正则才真正生效
HTML 的 pattern 会自动添加 ^ 和 $，所以你**不用手动加首尾锚点**。写错成 pattern="^[A-Z]{2}\d{6}$" 反而可能因重复锚点导致兼容问题（部分老浏览器解析异常）。
- 正确写法：
pattern="[A-Z]{2}\d{6}"→ 要求恰好 2 个大写字母 + 6 位数字 - 若允许 5–7 位数字：
pattern="[A-Z]{2}\d{5,7}" - 若前缀不固定（如 AB/CD/EF）：
pattern="(AB|CD|EF)\d{6}"，注意括号无需转义 - 若工号可含短横线（如 AB-123456）：
pattern="[A-Z]{2}-\d{6}"，短横线是字面量，直接写
为什么提交时没报错，但后端收不到数据
常见原因是 pattern 校验失败时，浏览器只在 submit 事件触发时阻止表单提交，并显示默认提示（内容来自 title 属性），但不会清空输入框、也不会标记为 invalid 状态——用户可能根本没看到提示，就去点别的按钮了。
- 必须配
title，例如：title="工号格式：2位大写字母+6位数字，如 AB123456" - 若需实时反馈，得用 JavaScript 监听
input或blur事件，调用checkValidity()并手动处理 UI -
required要单独加，pattern不包含非空逻辑
大小写、空格、粘贴场景怎么兜底
pattern 是纯文本匹配，对用户粘贴的全角字符、中文空格、换行符完全无感——这些都会让校验静默失败，甚至把非法字符一起提交。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 粘贴时建议用
onpaste清洗：onpaste="this.value=this.value.replace(/[^A-Z0-9]/g,'')" - 输入时用
oninput强制转大写：oninput="this.value=this.value.toUpperCase().replace(/[^A-Z0-9]/g,'')" - 如果工号允许小写字母，别用
toUpperCase()，改用pattern="[a-zA-Z]{2}\d{6}"，但注意后端是否真能接受混写
真正要小心的是 pattern 的“隐性截断”行为
当用户输入 AB1234567（超长），pattern="[A-Z]{2}\d{6}" 会判定整个字符串不匹配，但浏览器不会自动截断到前 8 位——它只是标记为 invalid，值仍保持原样。后端收到的就是非法长字符串，不是你预期的“被截断后的合法值”。
所以，仅靠 pattern 无法替代服务端校验，也不能替代前端主动清洗。最稳的做法是：用 pattern 做提交前强提醒，用 oninput 做实时过滤，再用后端做最终裁剪与合法性判断——三者缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
