pattern 不适合提交时格式化，因其仅校验正则匹配而不修改值；提交前应在 submit 事件中用 replace(/\D/g, '') 清洗手机号，长度不符时 preventDefault 并提示。
表单提交时不做分段格式化——那是输入过程中的事；提交前若需统一格式（如去除空格、横杠、括号），应在 submit 事件里清洗值，而非依赖 pattern 或 input 事件。
为什么 pattern 不适合做提交时的格式化
pattern 属性只校验是否匹配正则，不修改值，也不触发任何格式化逻辑。它甚至不会阻止用户输入空格或横杠，只在调用 checkValidity() 或表单提交时返回 false。常见错误是以为写上 pattern="^1[3-9]\d{9}$" 就能自动删掉用户输的 - 或空格，实际完全不会。
- pattern 的作用仅限于“告诉浏览器：合法值长这样”，不是“把值变成这样”
- 若用户输入
138-1234-5678，pattern校验失败，但原始字符串仍保持原样 - 提交时拿到的仍是带分隔符的字符串，后端还得自己清理
submit 事件中清洗手机号的实操写法
在表单 submit 回调里，对目标 <input> 的 .value 做一次确定性清洗，再赋回或传给后端。关键点：只处理数字，保留原始光标/交互逻辑不变，不影响用户正在编辑的状态。
- 用
.replace(/\D/g, '')提纯数字，比.replace(/[^0-9]/g, '')更可靠（能清除 Unicode 数字、全角数字等） - 清洗后若长度不足 11 位，可提前
event.preventDefault()并提示，避免无效提交 - 不要直接改
input.value后再提交——这会干扰 React/Vue 受控组件，应清洗后单独取值上传 - 示例：
form.addEventListener('submit', (e) => { const phoneInput = document.getElementById('phone'); const raw = phoneInput.value; const digits = raw.replace(/\D/g, ''); if (digits.length !== 11) { e.preventDefault(); alert('请输入11位手机号'); return; } // 此处 digits 就是干净的 11 位数字，可发给后端 sendData({ phone: digits }); });
如果必须提交带分隔符的格式（如 138-1234-5678）
那就得在清洗后手动重组，而不是靠 pattern 或 type 属性。注意：这种格式纯属展示需求，后端仍应以纯数字为准校验和存储。
立即学习“前端免费学习笔记（深入）”；
- 重组逻辑要明确边界：比如
${digits.slice(0,3)}-${digits.slice(3,7)}-${digits.slice(7)} - 别用
toLocaleString()或正则替换——它不适用于手机号这种固定分段，且 locale 无关 - 若用户粘贴了已格式化的号码（如
138 1234 5678），清洗再重组比尝试“保留原格式”更稳定 - 切勿在
submit里调用setSelectionRange()——此时 input 已失焦，无效且可能报错
真正容易被忽略的是：提交清洗和输入时格式化是两套逻辑，混用会导致光标跳脱、React 警告、Android 输入法兼容问题。输入阶段用 input 事件 + 光标保护做体验，提交阶段只做确定性清洗，各司其职。
