HTML不支持正则表达式校验昵称，应使用input的pattern属性，它在表单提交时自动匹配JavaScript风格正则（无需^$，不支持标志），需搭配required、title及服务端二次校验。
HTML 本身不支持用正则表达式校验昵称——pattern 属性才是你该用的，而且它只在表单提交时触发，不是实时正则引擎。
为什么不能用“HTML 正则表达式”？
HTML 没有正则执行能力，所谓“HTML 正则”其实是误解。真正起作用的是 input 元素的 pattern 属性，它接受一个 JavaScript 风格的正则字面量（不带 /g、/i 等标志），由浏览器在表单提交前自动匹配。
-
pattern不支持^和$—— 浏览器会自动锚定到字符串首尾，写pattern="^[a-zA-Z0-9_]{2,16}$"和pattern="[a-zA-Z0-9_]{2,16}"效果一样 - 空字符串默认通过校验，除非加
required - 中文、emoji、空格等需显式允许，否则默认被拒
常见昵称规则对应的 pattern 写法
根据实际业务选一条，直接贴进 input 标签：
- 纯字母数字下划线，2–16 字符：
pattern="[a-zA-Z0-9_]{2,16}" required - 允许中文、英文、数字、短横线和下划线（常见国内场景）：
pattern="[u4e00-u9fa5a-zA-Z0-9_-]{2,16}" required - 禁止开头/结尾为空格、禁止连续空格、允许中间单空格：
pattern="^(?!s)(?!S*s$)S+(?:sS+)*$" required（注意：这个较复杂，部分老版 Safari 可能不支持 lookahead） - 更稳妥的“非空白字符开头结尾 + 中间可含单空格”：
pattern="S(?:S| S){1,15}" required（等效于 2–16 字符，且无首尾空格）
pattern 的坑和补救手段
仅靠 pattern 不够健壮，容易被绕过或体验差：
立即学习“前端免费学习笔记（深入）”；
- 用户粘贴内容后不会实时提示错误，要等到提交或失焦才触发 —— 建议加
oninput="this.checkValidity()"并监听invalid事件做提示 - 移动端软键盘可能不弹出对应字符类型（比如设了
pattern="[0-9]"才弹数字键盘），但昵称场景一般用type="text"更稳妥 -
title属性值会作为默认错误提示，务必写清楚，例如：title="昵称只能包含中文、英文字母、数字、下划线或短横线，2–16个字符" - 服务端必须重复校验 ——
pattern完全可被禁用或绕过
最常被忽略的一点：Unicode 字符宽度和长度判断不一致。比如一个 emoji（如 ??）在 JS 中 .length 可能是 2 或 4，但浏览器对 pattern 的字符计数通常按码点算，不一定和用户感知的“字数”一致。真要严格控长，服务端得用 Intl.Segmenter 或正则 /\p{Extended_Pictographic}/u 做细粒度处理。
