应组合使用 type="tel" 和 pattern 属性，type="tel" 仅触发手机键盘和基础语义，不校验格式；pattern 提供宽松正则（如[0-9+-\s()]{7,20}）拦截明显错误，配合 title 提示，再通过 JS 清洗、后端解析与 E.164 存储实现分层校验。
电话号码校验该用 type="tel" 还是 pattern？
type="tel" 本身不校验格式，只触发手机键盘和基础语义；真正做格式约束得靠 pattern 属性。浏览器不会自动验证 type="tel" 输入内容是否合法，提交时照样能通过——这点很多人踩过坑。
推荐组合：<input type="tel" pattern="[0-9+\-\s()]{7,20}" title="请输入有效的电话号码">。其中 pattern 是正则表达式，title 是校验失败时的提示文案（必须写，否则没提示）。
-
[0-9+\-\s()]{7,20}允许数字、+、-、空格、括号，长度 7–20，覆盖多数国际/国内常见写法 - 别用
^和$——pattern默认全匹配，加了反而失效 - 移动端 Safari 对
pattern支持较弱，iOS 15.4+ 才稳定生效，老版本需 JS 补充校验
为什么单纯用正则很难做到“真正有效”的电话校验？
因为全球电话号码格式差异太大：中国手机号是 11 位 1[3-9]\d{9}，固话带区号可能含短横或括号，海外号码还有国家码前缀（如 +86）、分机号（ext. 123）等。一个正则想覆盖所有合法格式，要么太宽（放过无效号），要么太严（拦住真实号码）。
更务实的做法是分层处理：
立即学习“前端免费学习笔记（深入）”；
- 前端用宽松
pattern拦明显错误（如纯字母、超长乱码） - 提交前用 JS 做轻量清洗：去掉空格、括号、短横，提取纯数字
- 后端按国家码+号码长度做二次判断（例如提取出
8613812345678后，校验是否符合中国手机号规则）
JS 手动校验时，input 事件和 blur 事件怎么选？
用户边输边校验体验更好，但别在每次 input 里跑复杂正则——尤其在输入中文或粘贴内容时容易卡顿。建议：
- 监听
input事件做实时清洗（比如自动删除非数字字符），但只显示“格式待确认”状态 - 真正校验逻辑放在
blur（失焦）或表单submit时执行 - 避免用
onchange—— 它在失去焦点且值改变后才触发，对即时反馈不敏感 - 示例清洗逻辑：
value.replace(/[^0-9+\-\s()]/g, '')，比盲目匹配更可控
后端校验不可省，哪怕前端做了双重检查
前端校验能提升体验、减少无效请求，但完全不可信。攻击者可以禁用 JS、绕过 HTML 属性、直接调接口发恶意数据。所以后端必须独立完成号码解析与合法性判断。
关键点：
- 不要只校验字符串长度或正则匹配，要解析出国家码和本地号码（可用开源库如
libphonenumber-js） - 注意
+86 138 1234 5678、0086-138-1234-5678、(138) 1234-5678等不同写法，清洗后再解析 - 数据库存号码时，建议统一存 E.164 格式（如
+8613812345678），避免存储格式混乱影响后续调用
最常被忽略的是：前端展示的“格式正确”不等于“号码真实存在”，也不代表能打通。真要验证有效性，得走短信/语音验证码流程——那已是另一个系统层级的事了。
