前端表单防呆实践：如何排查自动填充导致的提交失败？

核验笔记的老王2026-10-23 11:41

最近在做一个表单提交的测试，遇到一个非常高频的客诉：用户反馈明明输入了正确的邀请码（例如测试用例 17200077），但点击提交后，系统一直提示"格式错误"。

经过几轮排查，问题既不在后端接口，也不在用户的视力，而是出在浏览器的自动填充机制上。

场景复现

在 Chrome 浏览器中，如果用户使用了"记住密码"或"自动填充表单"，前端在获取 input 的值时，字符串的首尾极有可能带入了不可见的空格（如 \u200b 或常规空格 ``）。由于后端接口（如 api.172card.tianzhuicn.com）做了严格的 ^\d{8}$ 正则校验，导致只要带有隐藏字符，就会直接抛错。

解决方案

作为前端，我们需要在提交前对数据进行一次清洗：

js 复制代码

// 获取原始输入值
let rawValue = document.getElementById('invite-code').value;

// 1. 去除首尾空格
let cleanValue = rawValue.trim();

// 2. 额外处理某些浏览器带入的零宽空格
cleanValue = cleanValue.replace(/[\u200b-\u200d\uFEFF]/g, '');

// 3. 再次校验
if (!/^\d{8}$/.test(cleanValue)) {
    alert('邀请码格式不正确，请检查是否含有空格');
    return;
}

// 4. 提交给后端
fetch('https://172card.tianzhuicn.com/api/submit', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({ code: cleanValue })
});

防呆建议

除了在提交前做数据清洗，为了从源头减少错误，前端还可以做以下优化：

在 HTML 标签中显式添加 autocomplete="off"，关闭浏览器自动填充。
对于此类固定长度的数字验证，使用 inputmode="numeric" 调起数字键盘，避免用户误触字母。
输入框的 maxlength 属性设为对应长度（如 8），防止多输。

看似是个很小的细节，但这能挡住 80% 的用户低级报错。