HTML5 pattern属性仅在提交时校验input值是否匹配正则，不实时拦截；中国手机号推荐pattern="^1[3-9]\d{9}$"，须配合type="tel"、required和title使用，并辅以JS监听与后端校验。
HTML5 的 pattern 属性可用于对 <input> 元素进行客户端正则校验，但需注意：它只校验输入值是否**匹配指定正则表达式**，且仅在表单提交时触发（或调用 checkValidity() 时），不实时拦截非法字符输入。
手机号 pattern 正则需适配中国主流号段
中国大陆手机号为 11 位，以 1 开头，第二位常见为 3–9（排除 11、12 等已停用号段）。推荐使用较稳妥的正则：
-
pattern="^1[3-9]\d{9}$"—— 覆盖 13–19 所有号段（如 130–139、145–147、150–159、170–178、180–189、190–199） - 避免过时写法如
^1[3-8]\d{9}$（遗漏 19 开头新号段） - 不要用
\d{11}或^1\d{10}$（无法排除 110、119 等非手机号）
必须配合 type="tel" 和 required 才有实际效果
pattern 单独存在不会自动提示错误；需结合以下属性才能触发浏览器原生校验反馈：
-
type="tel"：启用移动端数字键盘，同时让 pattern 生效（部分浏览器对type="text"的 pattern 支持不一致） -
required：确保非空校验与 pattern 校验联动 -
title：提供自定义提示文本，当校验失败时显示（如title="请输入正确的11位手机号"）
完整示例：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
<input type="tel" pattern="^1[3-9]\d{9}$" required title="请输入正确的11位手机号">pattern 校验有局限，不能替代后端和 JavaScript 补充
仅靠 pattern 不足以保障数据质量：
- 不校验号段真实性（如 144、174 等虚拟运营商号段可能未被覆盖）
- 不检测是否为真实存在的号码（如空号、销户号）
- 用户可绕过前端（禁用 JS、手动修改 HTML、用 curl 提交）
- 不支持输入过程中的友好提示（如自动添加空格、限制长度）
建议搭配：JavaScript 实时监听 + 后端二次校验 + 短信验证码确认。
移动端兼容性与用户体验提醒
多数现代浏览器（Chrome、Firefox、Safari iOS ≥10.3、Edge）支持 pattern，但表现略有差异：
- iOS Safari 对
type="tel"的 pattern 支持良好，会弹出数字键盘并校验 - 部分安卓浏览器可能忽略
title提示，改用默认文案 - 不要依赖 pattern 实现“只能输数字”——它不阻止粘贴或输入字母，只在提交时判断
- 若需更强控制（如屏蔽非数字字符），仍需 JavaScript 的
input事件监听
