手机号输入框应使用 type="tel" 并配合 inputmode="numeric" 和 pattern="[0-9]*"，监听 input 事件实时清理非数字字符，服务端必须校验号段与状态，同时支持国际号码并声明 lang 属性。
手机号输入框必须用 type="tel"
浏览器对 type="number" 和 type="text" 处理手机号都不理想：type="number" 会触发数字键盘但允许输入「e」「+」「-」，还可能自动删前导零；type="text" 键盘不智能，且无法阻止粘贴非数字内容。用 type="tel" 是最务实的选择——它在移动端唤起电话键盘，语义正确，且不会强制校验格式。
实操建议：
- 始终加
inputmode="numeric"（增强移动端数字键盘提示） - 加
pattern="[0-9]*"配合type="tel"，限制粘贴/手动输入非数字字符（注意：pattern 不触发自动验证，需配合 JS 或表单提交时校验） - 避免用
maxlength="11"硬限制——海外号码、带国家码（如+86 13812345678）长度远超 11，应由业务逻辑判断，而非 HTML 层卡死
防用户乱输：用 input 事件 + 正则清理比 onchange 更及时
等用户失焦再处理，已经晚了——比如他粘贴了「138-1234-5678」或「138 1234 5678」，再展示错误会打断操作流。直接在输入过程中过滤更自然。
常见错误现象：只监听 change，导致中间状态脏数据残留；或用 keydown 拦截但无法处理粘贴、拖拽、语音输入等场景。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 监听
input事件，用value.replace(/[^0-9]/g, '')实时清理 - 清理后若长度突变（如从 11 变成 10），可同步调用
setSelectionRange()保持光标在合理位置，避免跳动 - 别在清理时直接
value = cleaned后就完事——要检查是否真有变更，否则会干扰 React/Vue 的受控组件逻辑
服务端永远不能信前端的「格式正确」
前端正则（比如 ^1[3-9]\d{9}$）只能筛掉明显错误，但无法判断号码是否真实存在、是否停机、是否被标记为骚扰。更关键的是：HTML 和 JS 全部可绕过。
使用场景：注册、登录、短信验证码发送前，都必须走服务端号段+运营商接口校验，而不是只看「是不是 11 位数字」。
实操建议：
- 前端只做体验层过滤（提升输入效率），不承担验证责任
- 后端校验至少分两步：① 基础格式（去空格、去符号、国家码标准化）；② 调用可信渠道查号段归属和活跃状态
- 别把「手机号正则」写死在前端 JS 里——号段每月都在扩，维护成本高且容易过期
无障碍和国际化常被忽略的点
用 aria-label 或 <label></label> 包裹是基本，但还有两个硬伤：一是没声明语言（lang="zh-CN"），屏幕阅读器可能用英文读数字；二是没处理国际号码输入场景。
性能 / 兼容性影响：不加 lang 对 SEO 和读屏体验有实际影响；强行固定「11 位」会直接让海外用户无法提交。
实操建议：
- 输入框外显文案写清楚支持格式，例如「请输入手机号（含国家代码，如 +8613812345678）」
- 加
lang="zh-CN"到input或其父容器，确保数字按中文习惯逐字读出 - 如果业务真要支持国际号码，放弃「纯数字」清理逻辑，改用 libphonenumber 等库做标准化解析，前端只传原始字符串给后端
