HTML5 pattern仅作基础兜底，需JS实时清洗+分段校验；正则须精简兼容各浏览器，配合title、inputmode、autocapitalize等属性优化体验；前后端必须共用动态更新的车牌规则并统一编码。
pattern 属性只能做最简校验，真要靠谱得靠 JS 实时清理 + 分段判断，否则「粤B·D12345」「京A警1234」这类变体一抓一个错。
用 pattern 做 HTML5 基础兜底，别指望它全覆盖
浏览器原生的 pattern 只在 submit 时触发，且不支持 Unicode 范围外汉字、不处理空格和分隔符（如点、中英文空格），写太复杂的正则反而让部分浏览器直接忽略该属性。
- 可设为
pattern="^[\u4E00-\u9FA5][A-Z][A-HJ-NP-Z0-9]{4,5}[A-Z0-9\u4E00-\u9FA5]?$"，覆盖大部分蓝/黄牌结构（7–8位） - 必须配
title="请输入正确的车牌号"，否则校验失败时没提示 -
type必须是"text"；type="number"或"tel"会让pattern完全失效 - 别把新能源、挂车、警车等全塞进一个正则——
pattern不支持分支逻辑，写长了 Safari 会静默降级
监听 input 事件做实时清洗和分段校验
用户敲下第二个字符时就该知道是不是合法开头，而不是等到点提交才报错。关键不是“匹配整个字符串”，而是“每一步都可控”。
- 先用
.replace(/[\s·.]/g, '')统一清理空格、中文点、英文点 - 检查前两位：是否为
省份简称 + 字母（如「京A」「粤B」），或WJ+省份（军车）、使+数字（使馆） - 再看第三位起：如果是
D或F，走新能源分支（后面必须接 5 位 alphanumeric）；如果是警或挂，走特种车分支（长度固定、后缀明确） - 用
setCustomValidity()动态设错，配合reportValidity()触发原生 UI 反馈（红边框 + tooltip）
移动端软键盘适配不当，输「京A」就卡住
安卓默认键盘打不出汉字，iOS 默认小写，用户输「京a12345」或「京 A12345」就直接挂掉校验——这不是正则问题，是 input 配置漏了。
- 加
inputmode="text"：强制调出全字符键盘，别用numeric或tel - 加
autocapitalize="characters"：iOS 下每个字母自动大写，避免a被当非法字符 - 加
spellcheck="false"：禁用拼写纠错，防止「粤B」被标红 - 别信「type="search" 更好用」——它会额外触发搜索建议，干扰输入流
后端不重复校验，前端所有逻辑等于白写
JS 校验可以被绕过，pattern 可以被禁用，用户改个 DOM 就能发任意字符串。你前端越精细，后端越不能偷懒。
立即学习“前端免费学习笔记（深入）”；
- 前后端必须共用同一套省份简称列表（注意「港澳」不是省级行政区，但粤Z车牌要单独支持）
- 新能源规则要同步：2023 年起部分城市放开「F」字头，2025 年新增「青」「宁」等试点，硬编码正则很快过期
- 对
粤Z1234港这类跨境车牌，后端需额外验证末尾「港」「澳」是否与前缀匹配，前端只做格式初筛 - 最易忽略的是 UTF-8 编码一致性：前端用
encodeURIComponent发送，后端必须用相同编码解，否则「粤B」可能变成乱码
