HTML的pattern属性匹配中文必须用[\u4e00-\u9fa5]，不能用\p{Han}；需双反斜杠转义，连字符-须置末尾，且须配合oninvalid和oninput事件及.trim()处理空格。
pattern匹配中文必须用Unicode范围，不能用\p{Han}
HTML的pattern属性不支持Unicode属性类（如\p{Han}），所有浏览器都会忽略它。唯一可靠写法是显式写出中文Unicode码点范围：[\u4e00-\u9fa5]。注意必须双反斜杠——HTML属性值里单个\u会被解析器吞掉，实际得写成[\u4e00-\u9fa5]（即\u4e00-\u9fa5在源码中表现为\u4e00-\u9fa5）。
常见错误：pattern="[\p{Han}]{2,4}"完全无效；pattern="[一-龥]"虽在部分Chrome能碰巧生效，但属于非标准写法，Safari和旧Android直接报错或静默失效。
中文+字母数字混合时怎么写字符类
组合多个字符集时，连字符-必须放在方括号开头或结尾，否则会被当成范围符。中文范围和其他字符混写，推荐把-放末尾：
-
pattern="[\u4e00-\u9fa5a-zA-Z0-9_\-]{2,10}"✅（短横在最后） -
pattern="[\u4e00-\u9fa5a-zA-Z0-9\-_]"✅（短横在倒数第二位也安全） -
pattern="[\u4e00-\u9fa5a-z\-A-Z]"❌（-夹在z和A之间，解析为“z到A”的非法范围）
点号.、加号+、星号*在[]内无特殊含义，**不要转义**；乱写\.会触发Invalid identity escape错误。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
为什么写了\u4e00-\u9fa5却匹配不到「々」「〆」这类扩展汉字
因为\u4e00-\u9fa5只覆盖基本汉字区（CJK Unified Ideographs），不包含日文平假名、片假名、扩展A/B区汉字，也不含全角标点或异体字。如果业务真要覆盖更广，只能手动追加：
- 常用扩展：加
\u3400-\u4dbf（扩展A）、\u20000-\u2a6df（扩展B，需UTF-8且注意高位代理对） - 但注意：Safari对四字节Unicode支持弱，
\u20000这种写法在iOS上大概率被截断或忽略 - 更稳妥的做法是放弃扩展区，后端用
[\p{Han}\p{Katakana}\p{Hiragana}]做完整校验
绝大多数中文表单场景，[\u4e00-\u9fa5]已足够——别为小众字符牺牲兼容性。
移动端中文输入常被截断或提示消失，怎么补救
iOS Safari对title提示支持极差，长按输入框几乎不显示；Android部分版本会把中文title渲染为空白。此时仅靠pattern等于没提示：
- 必须绑定
oninvalid事件，手动设提示：oninvalid="this.setCustomValidity('请输入中文')" - 且每次输入都要重置：
oninput="this.setCustomValidity('')"，否则合法输入仍报错 - 别依赖
checkValidity()返回值做UI状态判断——input.validity.valid不会自动更新，得配合input事件监听
最易被忽略的是：用户粘贴带空格的中文（如“张三 ”），pattern原样匹配，但首尾全角空格会导致失败。前端校验前务必.trim()，而pattern本身做不到这点。
