应使用maxlength="11"、pattern="1[3-9]\d{9}"、title="请输入11位手机号"、oninput实时过滤非数字字符，并配合onpaste拦截粘贴，且服务端必须重复校验。
手机号输入框怎么限制只能输11位数字
直接用 input 的 type="tel" 只是唤起数字键盘，不校验长度和内容。真要控制格式，得靠 pattern + maxlength + JavaScript 监听配合。
常见错误是只写 pattern="^1[3-9]\d{9}$" 却没加 title 提示，用户提交失败时根本不知道哪里错了；或者用了 inputmode="numeric" 但 iOS 上仍能粘贴字母。
-
maxlength="11"必须加上，防止手动输入超长 -
pattern正则建议用pattern="1[3-9]\d{9}"（去掉 ^$，因为浏览器对pattern的匹配是全字段匹配） - 必须配
title="请输入11位手机号"，否则验证失败无提示 - 加
oninput="this.value = this.value.replace(/\D/g, '')"实时过滤非数字字符
为什么 oninput 比 onchange 更适合实时过滤
onchange 只在失焦后触发，用户可能已输入“138abc12345”，再点提交才清理，体验差；oninput 在每次输入、粘贴、删除时都执行，响应及时。
但要注意：iOS Safari 对 oninput 在 type="tel" 下偶尔有延迟，所以最好再加一层 onpaste 阻断：
立即学习“前端免费学习笔记（深入）”；
onpaste="event.preventDefault(); const t = event.clipboardData.getData('text'); this.value = t.replace(/\D/g, '').slice(0, 11);"
Vue/React 里怎么避免双向绑定被干扰
在 Vue 中用 v-model 或 React 用 value + onChange 时，如果只在事件里做 replace，可能导致光标跳到末尾。关键是要保留用户编辑位置。
简单方案是：先记录光标位置，再替换，最后重置光标。但多数场景下，直接截断更稳妥：
- Vue：
@input="val => phone = val.replace(/\D/g, '').slice(0, 11)" - React：
onChange={(e) => setPhone(e.target.value.replace(/\D/g, '').slice(0, 11))} - 注意：不要在
setState或ref赋值后立刻操作 DOM 光标，容易冲突
服务端为什么不能只信前端正则
前端任何校验都可绕过——禁用 JS、curl 直发、抓包改请求。手机号正则在服务端必须重复校验，且建议用更严格的规则，比如排除虚拟号段（170、171 开头部分号段需查号段库）。
Node.js 示例校验逻辑：
const isValidPhone = (str) => /^1[3-9]\d{9}$/.test(str) && !['170', '171'].includes(str.slice(0, 3));
真正上线时，连空格、括号、短横线这些前端没拦住的脏数据，都可能进数据库，别省那几行后端校验代码。
