直接用 pattern 属性无法独立完成手机号校验，必须搭配 type="tel"、required 和 JavaScript 补位；pattern="^1[3-9]\d{9}$" 是最稳妥的正则写法，覆盖 13–19 开头号段且排除非手机号，需配合 title 提示和后端一致校验。
直接用 pattern 属性就能做基础校验，但只靠它不行——它不拦截输入、不提示实时错误、不防绕过，必须搭配 type="tel"、required 和 JavaScript 补位。
pattern="^1[3-9]\d{9}$" 是最稳妥的写法
这个正则覆盖所有现行号段（13–19），比 ^1[3-8]\d{9}$ 多支持 19 开头的新号，也比 ^1\d{10}$ 严格（排除 110、119 等非手机号）。
-
^1[3-9]\d{9}$中的^和$必须保留，否则用户输 “abc13812345678def” 也能通过 -
pattern值里**不能加首尾斜杠**，写成pattern="/^1[3-9]\d{9}$/"会报错 Invalid regular expression - 部分浏览器（如旧版 Safari）对
type="text"的pattern支持不稳定，务必用type="tel"
必须配齐 type="tel"、required 和 title
单独写 pattern 几乎没效果：浏览器不会弹提示、不阻止提交、移动端可能不唤出数字键盘。
-
type="tel"：触发手机端数字键盘，同时让pattern在多数浏览器中真正生效 -
required：和pattern联动校验——空值先报“必填”，填了但格式错才报title里的提示 -
title="请输入正确的11位手机号"：这是校验失败时唯一能自定义的提示文案，iOS/Safari 会显示它，Android 部分浏览器可能降级为默认文案
完整写法示例：
<input type="tel" pattern="^1[3-9]\d{9}$" required title="请输入正确的11位手机号">
立即学习“前端免费学习笔记（深入）”；
blur 或 input 事件里用 JS 做实时反馈
pattern 只在提交时触发，用户输错后不点提交就发现不了。要提示“正在输”或“已输错”，得靠 JS 主动调用校验 API。
- 监听
blur（失焦）比input更轻量，适合手机号这种输完才校验的场景 - 用
element.checkValidity()判断是否合规，返回false时再调element.reportValidity()弹原生气泡（注意 Firefox 不滚动到字段） - 更可控的做法是手动设错误状态：
element.setCustomValidity("手机号格式不对")，校验通过时一定得清空：element.setCustomValidity("")，否则后续提交永远失败
后端必须重校，且规则要和前端一致
前端校验只是体验层，用户禁用 JS、改 DOM、curl 提交都能绕过。后端收到 phone 字段后，仍要用同一正则 /^1[3-9]\d{9}$/ 过一遍。
- 别信
type="number"—— 它不支持 pattern，且允许科学计数法（如 1e10）和负号 - 别依赖
maxlength="11"防超长，用户可粘贴 20 位再删减，pattern 才是唯一可靠长度锁 - 如果业务要支持国际号码（+86 138…），pattern 就得改，但国内主流程建议坚持纯 11 位，国际号走另一套字段
真正容易被忽略的是：pattern 校验成功 ≠ 号码真实存在。144、174 等虚拟号段虽匹配正则，但可能未放号；空号、停机号也完全无法识别。最终确认必须靠短信验证码回传校验。
