税号输入框必须实时格式化并校验校验码，否则后端校验失败；需监听input事件、动态维护光标位置、清除非字母数字字符、转大写、截取18位、按规则插入横线，并复现权重算法验证第18位校验码。
税号输入框必须实时格式化，否则后端校验会失败
税号（统一社会信用代码）是18位固定长度字符串，含1位校验码，但用户习惯手输时不会加横线、空格或大小写混合。如果前端只做简单 <input type="text">，直接提交 "91110000MA005U2F1M" 还行，但一旦用户输成 "91 11 0000 MA 005U2F1M" 或 "91110000ma005u2f1m"，后端校验大概率报错——不是格式不合法，而是校验码算出来对不上。所以格式化不是“锦上添花”，是必选项。
用 input 事件 + setSelectionRange 控制光标位置
单纯用 value.replace() 格式化后赋值，会导致光标跳到末尾，破坏输入体验。关键是要在每次输入后，把光标“锚”在合理位置。比如用户在第6位后插入一个字符，格式化后变成 "911100-00MA-005U2F1M"，光标应落在第7位（即第一个横线后），而不是跑到最后。
实操要点：
- 监听
input事件（不用keydown，避免拦截粘贴和 IME 输入） - 提取纯数字+字母（
value.replace(/[^a-zA-Z0-9]/g, '')），转大写，截取前18位 - 按规则插入横线：
str.slice(0,6) + '-' + str.slice(6,10) + '-' + str.slice(10) - 调用
inputEl.setSelectionRange(newCursorPos, newCursorPos)，其中newCursorPos需根据原始光标位置和格式化后字符串变化动态计算 - 注意处理退格、删除、粘贴等场景：先保存
inputEl.selectionStart，再更新value，最后恢复光标
校验逻辑不能只靠正则，得跑真实校验码算法
很多方案只用正则 /^[A-Z0-9]{18}$/ 或 /^\d{15}|\d{17}[\dxX]$/ 判断，这不够。统一社会信用代码的第18位是校验码，由前17位按特定权重表计算得出。前端必须复现这套算法，否则用户输错校验位，却直到提交才报错，体验极差。
校验函数核心逻辑（JavaScript）：
function validateUSCC(code) {
if (!/^[A-Z0-9]{18}$/.test(code)) return false;
const weights = [1, 3, 9, 27, 19, 26, 16, 17, 20, 29, 25, 13, 8, 24, 10, 30, 28];
const map = '0123456789ABCDEFGHJKLMNPQRTUWXY'; // 注意：I、O、S、Z、V 不在其中
let sum = 0;
for (let i = 0; i <p>把这个函数集成进输入框的 <code>blur</code> 和实时提示中，比只看长度和字符集靠谱得多。</p><h3>移动端软键盘适配和兼容性陷阱</h3><p>安卓微信内置浏览器、iOS Safari 对 <code>input</code> 光标控制支持不一致。常见问题包括：<code>setSelectionRange</code> 在某些版本里无效、粘贴后光标乱跳、中文输入法下触发多次 <code>input</code> 事件。</p><p>绕过方案：</p>
- 对 iOS 使用
setTimeout(..., 0)延迟执行光标设置，避开渲染队列冲突 - 安卓端检测是否为微信环境（
navigator.userAgent.includes('MicroMessenger')），若检测到，则禁用自动格式化，改用blur时一次性修正并提示 - 粘贴场景单独监听
paste事件，event.preventDefault()后手动读取剪贴板文本、清洗、格式化、插入，并主动设置光标 - 永远保留一个纯文本后备字段（
<input type="hidden" name="tax_id_raw">），存清洗后的18位大写码，供后端直接使用
最麻烦的不是写格式化逻辑，而是不同终端对光标和输入事件的解释差异。哪怕同一段代码，在 Chrome Desktop、iOS Safari、微信安卓版里表现都可能不同——建议在真实设备上逐个测，别信模拟器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
