座机号应拆分为areaCode和phoneNumber两个字段：areaCode用pattern="0[1-9]\d{1,2}"限制以0开头的2~4位区号，phoneNumber用pattern="\d{7,8}"匹配7~8位本地号，均需加required、aria-describedby及inputmode="numeric"，拼接前清理不可见字符，后端二次校验。
座机号输入要分两段填，别用单个 <input type="tel">
纯 <input type="tel"> 对座机不友好——它没法约束区号+号码的结构，用户随手输 02112345678 或 21-12345678 都算“合法”，但后端解析和校验会出问题。真正可控的做法是拆成两个字段：areaCode（区号）和 phoneNumber（本地号），再用 pattern 和 inputmode 锁定格式。
常见错误现象：用户在单输入框里混输括号、短横线、空格，导致正则校验失效、自动填充失败、语音读屏混乱。
-
areaCode用<input pattern="0[1-9]\d{1,2}" inputmode="numeric" maxlength="4">，强制以0开头、2~4位数字（如010、021、0755） -
phoneNumber用<input pattern="\d{7,8}" inputmode="numeric" maxlength="8">，匹配常见 7~8 位本地号（避开0开头的特殊号段） - 两个字段加
required，并用aria-describedby关联提示文案，提升可访问性
区号输入框必须限制首位为 0，否则会收 123 这类无效值
国内座机区号全是以 0 开头的，但 pattern="0\d{2,3}" 不够严谨：它允许 000、012 这种不存在的区号。实际应排除 000、001、002 等非法组合，同时兼容直辖市（010）、副省级城市（021、022、025…）和地级市（0755、0571）。
- 推荐 pattern：
0([1-9]\d{1,2}|[1-9]\d{0,1})—— 先匹配0，再要求第二位非零，第三四位可选（覆盖010~0755） - 加 JS 实时拦截：
input事件中检查value[0] !== '0'就setSelectionRange(0,0)清掉首字符 - 别依赖
type="number"：它会触发上下箭头、允许负号和小数点，反而破坏输入体验
提交前拼接验证要防空格和隐藏字符，否则后端收到 "021 12345678"（含 Unicode 不间断空格）
用户可能从微信、邮件复制带不可见字符的号码，比如 021 12345678 中的 （U+00A0）或 （U+202F）。直接 areaCode.value + phoneNumber.value 拼接，后端 trim() 都救不回来。
立即学习“前端免费学习笔记（深入）”；
- 拼接前统一清理：
const full = (areaCode.value.trim().replace(/[\u2000-\u206F\u2E00-\u2E7F\uFE2E\uFE2F\s]+/g, '') + phoneNumber.value.trim().replace(/[\u2000-\u206F\u2E00-\u2E7F\uFE2E\uFE2F\s]+/g, '')) - 后端仍需二次校验：长度是否为 11~12 位、是否以
0开头、区号是否在白名单内（如['010','021','022',...]） - 别省略
name属性：两个字段都要有name="area_code"和name="phone_number"，否则 POST 数据里根本收不到
移动端软键盘弹出数字盘，但 iOS Safari 会忽略 inputmode="numeric" 的部分情况
iOS Safari 对 inputmode 支持不稳定，尤其在表单嵌套或页面缩放后，可能仍弹出字母键盘。这时候得加一层兜底：
- 给两个输入框都加上
inputmode="decimal"（比numeric兼容性更好） - 同时设
pattern="[0-9]*"，iOS 会识别并优先调起数字键盘 - 禁用粘贴中的非数字字符：
onpaste="this.value = this.value.replace(/\D/g,''); return false;"（简单粗暴但有效） - 避免用
autocapitalize="off"或autocorrect="off"：它们对数字输入无影响，还可能干扰密码字段逻辑
最麻烦的其实是区号和号码之间要不要加分隔符——UI 上可以加，但输入框值里绝不能存 - 或 ，否则校验和存储都会多一层转换。显示用 CSS 伪元素或 JS 格式化，值永远保持干净数字串。
