JavaScript实现手机号实时格式化校验需监听input和paste事件，清洗非法字符，按11位规则分段加空格，用setSelectionRange保持光标位置，并同步校验状态反馈。
JavaScript 中实现表单手机号实时格式化校验，核心是「输入时动态处理值 + 实时验证逻辑 + 用户体验友好」。重点不是等提交才校验，而是在用户敲键盘过程中就自动补空格、限制非法字符、高亮错误，并保持光标位置合理。
监听输入并拦截非法字符
用 input 事件（非 keydown）监听，避免兼容性问题；在事件中获取当前输入框的原始值，过滤掉非数字字符（如字母、中文、符号），只保留数字和必要分隔符（如空格）：
- 用
value.replace(/[^0-9\s]/g, '')清除非数字和空格 - 若需支持粘贴，同时监听 paste 事件，对粘贴内容做同样清洗
- 注意：不要直接修改
e.target.value后再赋值，否则可能干扰光标位置
自动添加空格分隔（如 138 1234 5678）
格式化不是简单地每4位加空格，而是按中国手机号规则（11位纯数字）分段显示。推荐逻辑：
- 先提取所有数字 → 得到纯数字字符串（如
"13812345678"） - 长度为 11 时，格式化为
"138 1234 5678"；长度为 7 时，可显示为"138 1234"；其余长度不加空格或按需处理 - 使用
setSelectionRange在设置新值后恢复光标位置，避免跳位（关键！）
实时校验与状态反馈
校验应同步进行，但避免过于频繁触发（如防抖不是必须，因手机号最长11位，输入次数有限）：
立即学习“Java免费学习笔记（深入）”；
- 纯数字长度为 11 且以
1[3-9]开头 → 视为有效 - 长度不足 11 但 ≥ 7 → 可标为「输入中」，不报错
- 长度为 11 但开头非法（如 12 开头）→ 显示错误提示，可加红边框或图标
- 建议用
dataset.valid或 CSS class 控制样式，如input.valid/input.invalid
保持光标位置稳定（易被忽略的关键点）
每次重设 input 值都会重置光标到末尾，导致用户体验断裂。解决方法：
- 在修改前记录光标位置：
const pos = input.selectionStart - 设置新 value 后，根据新旧字符串差异推算光标应处位置（例如：原输入
"13812"光标在索引 4，格式化后变"138 12"，则新位置 ≈ 4 + 插入空格数） - 更稳妥做法：用
setTimeout(() => input.setSelectionRange(newPos, newPos), 0)延迟设置
不复杂但容易忽略细节，把输入清洗、格式化、光标维护、校验反馈四步串起来，就能做出既健壮又顺滑的手机号实时校验体验。
