type="tel" 不触发 pattern 校验，需改用 type="text" 并配合 inputmode="numeric" 和显式 pattern 才能实现原生正则验证与提交拦截。
input type="tel" 本身不触发 pattern 校验
浏览器对 type="tel" 的处理很宽松——它不会自动调用 pattern 属性做验证，也不会在提交时检查正则匹配。哪怕你写了 pattern="[0-9]{11}"，用户输 12 位数字照样能通过表单提交（除非加了 required 且 JS 干预）。这是很多开发者踩坑的起点：以为加了 pattern 就万事大吉。
-
type="tel"主要影响移动端键盘弹出（比如数字键盘），和可访问性（AT 工具识别为电话输入），但校验逻辑完全交由开发者控制 - 只有
type="text"、type="email"、type="url"等少数类型才原生支持pattern触发:valid/:invalid伪类和提交拦截 - 若坚持用
type="tel"，必须搭配 JS 手动调用checkValidity()或监听submit事件做干预
想用 pattern 必须改用 type="text"
最直接的解法是放弃 type="tel"，改用 type="text" 并显式声明 pattern 和 inputmode="numeric"（提升移动端体验）。这样浏览器才会真正执行正则校验，并阻止非法值提交。
<input type="text" inputmode="numeric" pattern="[0-9]{11}" title="请输入11位手机号" required>
-
inputmode="numeric"告诉移动端弹出数字键盘，效果接近type="tel" -
title是必填项——当校验失败时，浏览器会把它的值作为提示文案显示 - 注意：iOS Safari 对
inputmode支持有限，部分机型仍可能弹出全键盘，但至少不会干扰 pattern 行为
保留 type="tel" 时如何补 pattern 校验
如果业务强依赖 type="tel"（比如需要通话链接、第三方 SDK 识别），就得靠 JS 补齐校验逻辑。关键点不是“绑定 oninput”，而是确保在提交前拦截并反馈。
- 监听表单的
submit事件，用event.preventDefault()阻止默认行为 - 读取
input.value，用RegExp.test()检查是否匹配你的规则（比如大陆手机号：^1[3-9]\d{9}$） - 校验失败时，手动调用
input.setCustomValidity("提示文字")，再触发input.reportValidity()显示原生气泡 - 别只依赖
onblur或oninput——用户可能直接点提交按钮绕过实时校验
pattern 正则写法容易忽略的细节
很多人写的 pattern="[0-9]{11}" 在实际中会误判：它只匹配连续 11 个数字，但用户可能输入空格、括号或短横线（如 138-1234-5678）。要不要允许这些字符，取决于后端是否清洗。
- 若后端接受格式化输入，pattern 应放宽，例如：
pattern="^[\d\s\-\(\)]{11,15}$"（但需配合 JS 去除非数字字符再校验） - 若后端只认纯数字，pattern 最好严格匹配：
pattern="^1[3-9]\d{9}$"，同时用inputmode="numeric"减少误输 - pattern 正则**不带开头结尾锚点**（
^和$）也会被浏览器自动包裹，但显式写出更可靠，尤其涉及多段匹配时
type="tel" 和 pattern 的组合不是不能用，而是得清楚谁负责哪段逻辑——浏览器不兜底，所有校验责任最终落在你写的 JS 或后端接口上。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
