html input 的 pattern 属性匹配中文需用 [u4e00-u9fa5]（小写 u，无反斜杠），且必须搭配 type="text"、required 和 title 才生效；pattern 仅提交时校验，不拦截输入，移动端提示不可靠，应辅以 js 实时验证。
pattern里写中文正则必须用，不是\u4e00-\u9fa5
HTML 属性值不解析 JavaScript 风格的 Unicode 转义，\u4e00 会被当作文本字面量，直接失效。浏览器只认 HTML 实体风格的双反斜杠写法：u4e00（注意是小写 u，无反斜杠）。
常见错误：pattern="\u4e00-\u9fa5{2,10}" → 浏览器看到的是字面字符串 \u4e00-\u9fa5{2,10}，根本不会当作 Unicode 范围处理。
- ✅ 正确写法：
pattern="[u4e00-u9fa5]{2,10}"（匹配 2–10 个常用汉字） - ❌ 错误写法：
pattern="\u4e00-\u9fa5{2,10}"、pattern="[\u4e00-\u9fa5]{2,10}"、pattern="^[\u4e00-\u9fa5]{2,10}$" - ⚠️ 扩展提示：如需覆盖生僻字或扩展区，可追加
u3400-u4dbf或u20000-u2a6df，但 iOS 15.4 之前 Safari 不稳定，建议后端兜底
type="text" + required + title 是硬性组合，缺一不可
写了 pattern 却没反应？大概率是这三个属性没配齐。浏览器只在 type 为文本类（text、tel、email）且带 required 时，才把空值和格式一起校验；title 则是失败时唯一能控制的提示文案来源。
-
type="number"或type="date"下pattern完全被忽略 - 没加
required：用户留空就直接通过，pattern 形同虚设 - 没写
title：失败时只显示“请与所要求的格式匹配”，iOS Safari 甚至不弹提示 - 推荐写法：
<input type="text" pattern="[u4e00-u9fa5]{2,10}" required title="请输入2–10个汉字">
别信“支持中文”的模糊描述，pattern 不校验字形也不过滤输入
pattern 只在提交或调用 checkValidity() 时做一次全串匹配，它既不阻止用户粘贴乱码，也不拦截非法字符输入——你照样能输 emoji、全角数字、制表符，直到点提交才报错。
- 想实时过滤？得监听
input事件，用 JS 的RegExp.test()判断，再手动setCustomValidity("")清空状态 - 想兼容全角/半角？pattern 本身不转换，需 JS 统一处理（如
.replace(/[０-９]/g, c => String.fromCharCode(c.charCodeAt(0) - 0xF8F0))） - 粘贴绕过很常见：用户 Ctrl+V 一段含英文或符号的文本，pattern 不会自动截断，必须 JS 补位清洗
移动端中文输入法下，pattern 提示常被遮挡或不显示
iOS Safari 对 title 的渲染极其不可靠：键盘弹出时提示框可能被盖住，或干脆不触发；Android WebView 表现也不一致。不能指望它作为唯一反馈渠道。
- 必须搭配 JS 监听
invalid事件，调用setCustomValidity("请输入汉字")再reportValidity()强制触发 - 每次
input事件中要先清空自定义错误：input.setCustomValidity("")，否则改完内容仍卡在旧错误 - 真实项目中，更稳妥的做法是：禁用原生 pattern 提示，完全用 JS 控制 UI 状态（比如加 red border + 下方文字提示）
真正难的不是写对正则，而是让用户在输错时立刻知道哪里错了——而 pattern 本身连这个基本能力都没有。它只是个提交前的轻量守门员，别把它当过滤器、格式化工具或交互反馈引擎。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
