type="tel"仅提供语义提示和移动端数字键盘优化，不触发pattern校验、不拦截非法输入、checkvalidity()恒返回true；必须配合type="text"、pattern、inputmode="numeric"及js才能实现可靠校验。
type="tel" 的作用非常明确：它只负责语义提示和软键盘优化，不校验、不拦截、不阻止任何输入。
为什么 checkValidity() 总是返回 true
浏览器对 type="tel" 完全放行——哪怕你输进 "abc-123!@#"，form.checkValidity() 依然返回 true，表单照常提交。这不是 bug，是设计如此。HTML5 规范里就没给它定义校验逻辑。
- 所有主流浏览器（Chrome、Safari、Firefox）都遵循该行为
-
required属性只检查是否为空，不管内容是不是数字 - 即使配了
pattern，也只在submit时触发提示，input或blur事件里不会自动拦
pattern 和 inputmode 配合才能落地
单靠 type="tel" 毫无业务价值，必须叠加其他属性才可控：
-
pattern="[0-9]{11}"只在表单提交时触发原生提示，正则不加/^$/，且不支持复杂号段（比如170、166） -
inputmode="numeric"在 Android 上比inputmode="tel"更稳定唤起纯数字键盘；iOS 对inputmode支持有限，但至少比单用type="tel"强 -
title是 pattern 提示的文案载体，Safari 会截断，Chrome 显示完整，但无法自定义样式
JS 校验时最常踩的三个坑
前端过滤不是加个 replace(/[^0-9]/g, '') 就完事：
- 用户粘贴、长按删除、中文输入法下直接敲数字，都会让光标跳到末尾——得用
setSelectionRange保存/恢复位置 - 国内手机号不能只认 11 位，得匹配
^1[3-9]\d{9}$，并预留+86等国际前缀入口 - 后端永远不能信任前端校验结果，
type="tel"+pattern+ JS 过滤，只是提升体验，不是安全边界
真实场景里，一个电话输入框要稳住，得同时处理键盘行为、粘贴逻辑、光标位置、号段变更、国际化前缀——漏掉任意一环，用户一试就出错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
