应使用 type="text" 配合 pattern、title、aria-label 和 inputmode 等属性安全收集社交账号，避免误用 type="url"/"email"，禁用 autocomplete 防止填充错误，后端必须兜底校验。
怎么用 input 的 type="text" 安全收社交账号
HTML 本身不验证社交账号格式，input 只负责收字符串，真要拦错别字或非法平台账号，得靠 pattern + title 配合 JS 补位。纯 HTML 能做的只有基础提示和简单正则拦截。
常见错误是直接写 type="url" 或 type="email" —— 微博 ID 不是 URL，小红书用户名带下划线但不是邮箱，硬套会拦住合法输入。
-
pattern必须配合title，否则用户根本不知道哪错了（浏览器只弹“请与所要求的格式匹配”这种废话） - 微信 ID 允许字母、数字、下划线、减号，但不能以减号开头，也不能连续两个减号：
pattern="[a-zA-Z0-9_][a-zA-Z0-9_-]*" - 抖音/小红书用户名同理，但允许开头带
@？别加——@是前端展示习惯，后端解析时再处理，输入框里留纯 ID 更稳
placeholder 和 aria-label 到底写什么才不误导用户
写“请输入您的微博账号”不如写“如：weibo_name”，因为用户可能填 https://weibo.com/weibo_name 或 @weibo_name，而你后端只想要 weibo_name 这一段。
无障碍场景下，aria-label 比 placeholder 更可靠——iOS 语音朗读常忽略 placeholder，但必读 aria-label。
立即学习“前端免费学习笔记（深入）”；
- 统一用
aria-label="微博用户名（例如：weibo_name）"，不写“账号”“ID”“昵称”等模糊词 -
placeholder只作视觉辅助，内容必须和aria-label一致，且不能含空格或换行 - 别写“选填”——如果后端强依赖这个字段，就别给用户留侥幸心理；真可选，就去掉
required，别文字游戏
为什么 autocomplete 设成 "username" 反而坏事
浏览器自动填充时，autocomplete="username" 会优先塞进系统级登录账号（比如 Windows 登录名、Apple ID），和社交平台 ID 完全无关，填完一提交发现是 “zhangsan@company.com” 就傻了。
各平台没统一标准，但实测最稳的是按用途声明：
- 微博、B站、知乎：用
autocomplete="off"（别信“new-password”之类花招，无效） - 微信、QQ：干脆不用
autocomplete，加inputmode="text"防手机弹数字键盘 - 如果表单有多个账号字段（微信 + 微博 + 抖音），必须为每个设唯一
name和id，否则 Chrome 可能复用上一个的填充结果
后端校验缺失时，前端 pattern 能防住哪些问题
pattern 只在表单提交时触发，JS 主动调 checkValidity() 也一样，它防不住粘贴、拖拽、开发者工具改 DOM 这些操作。但它能快速暴露明显错误，比如用户输错平台规则。
典型漏判场景：用户复制了带空格的链接（ https://x.com/real_user ），pattern 拦不住首尾空格，得靠 trim() 处理；又比如小红书用户名允许中文，但部分安卓键盘会输进不可见的全角空格，pattern 也无能为力。
- 正则别写太死：微信 ID 允许 2–15 位，但
{2,15}在pattern里不生效，得靠 JS 截断或后端再判 - 所有社交账号字段都应设
spellcheck="false"，避免浏览器对“weibo_name”标红纠错 - 移动端 iOS Safari 对
pattern支持不稳定，关键业务必须后端兜底，前端只是体验优化
真正难的不是写对正则，而是搞清每个平台当前实际接受的字符集——微信去年放开了一次特殊符号，但文档没更新，得靠真实账号测。
