中文姓名校验需结合javascript实时trim与正则匹配，避免pattern属性局限；推荐/^[u4e00-u9fa5a-za-z·s]{2,10}$/，配合setcustomvalidity与reportvalidity，并处理输入法、空格、扩展汉字等边界情况。
pattern 属性对中文姓名的校验效果有限
直接用 pattern 做中文姓名校验，浏览器只在提交时触发，且不支持 ^ 和 $ 锚点——你写 pattern="[u4e00-u9fa5]{2,10}" 看似合理，但用户粘贴“张三 ”（带空格）或输入“John·Smith”就直接通过，因为浏览器自动做了全匹配宽松处理，且不 trim。更麻烦的是，移动端常不显示 title 提示，用户根本不知道错在哪。
JavaScript 实时验证必须手动 trim + test()
可靠做法是监听 input 或 blur 事件，对值做预处理再匹配：
- 先调
.trim()，否则前后空格会让正则直接失败 - 正则建议用字面量：
/^[u4e00-u9fa5a-zA-Z·s]{2,10}$/，覆盖常见中英文名、中间点、空格 - 别用
new RegExp()，否则 Unicode 转义要写成\u4e00，极易出错 - 验证通过后必须调
input.setCustomValidity("")，否则旧错误残留，表单永远卡住
setCustomValidity 配合 reportValidity 才能弹出提示
setCustomValidity("姓名格式不对") 只设状态，不触发 UI；要让用户看到气泡，得主动调 input.reportValidity()。但注意：
-
reportValidity()在 Firefox 中不会自动滚动到错误字段，Chrome 会 - Safari 移动端部分机型不渲染原生气泡，得 fallback 到手动 DOM 提示（比如往
.error元素里写文案） - 如果同时用了
required，valueMissing和自定义错误会共存，需用input.validity.valueMissing区分是“没填”还是“填得不对”
真正难的不是正则，是输入边界
中文姓名校验最常崩在这些地方：
- 输入法未上屏内容（如拼音状态下按回车，
input.value还是拼音） - 用户粘贴带全角空格、不间断空格（
u00A0）、中文顿号或破折号 - 港澳台用户姓名含「﨑」「邨」「喆」等扩展汉字，
u9fa5不覆盖 - 少数民族姓名如“买买提·艾山”，中间点是中文「·」（
u00B7）还是西文「·」（u00B7或u200C）不统一
所以生产环境别死守“必须纯汉字”，优先保证可读性与提交成功率，后端再做深度清洗和人工复核。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
