如何实现AI智能表单自动填写功能，用错场景反而更麻烦

AI 智能表单自动填写，指的是让模型读懂一段非结构化内容（截图、邮件正文、PDF 文本），再把抽出来的值填进表单字段。它能做，但只在「输入是非结构化文本、字段映射关系稳定」这两件事同时成立时才划算。用在字段天天变、需要强校验、或者第三方做了风控的页面上，会比手写规则更贵。

很多团队上这个功能的动机是「填表太烦」。但真正耗时的往往不是敲键盘，而是核对：填进去的值对不对、缺的字段怎么补、错了怎么回溯。如果自动填写把核对这一步变得更难，那就是用错了场景。

本文给出三种实现路径的区别、一个可直接跑在浏览器控制台里的最小示例，以及判断「该不该上 AI」的具体标准。今天这篇文章，编程狮就把这条实现路径讲透。

先看结论

自动填写分三层：DOM 层按选择器填、接口层直接调后端写库、AI 层负责把非结构化内容转成结构化字段。AI 只应该承担第三层的工作，前两层用确定性的代码做，又快又可控。

判断标准很简单：如果输入本身已经是结构化的（接口返回的 JSON、表格文件），压根不需要 AI；只有输入是人写的自然语言或扫描件时，AI 才值得介入。把 AI 塞进第一层，是最典型的用错场景。

想看清各类 AI 能力分别适合什么环节，可以先翻 AI 编程技能教程，把能力边界对上再动手。

一、先分清三种「自动填写」

名字一样，干的事完全不同。

1.1 DOM 层：按选择器填值

最传统也最快。找到输入框元素，把值写进去。适合字段位置固定的后台表单。

const fields = {
  '#username': 'w3cschool',
  '#email': 'hello@w3cschool.cn',
  '#city': '杭州'
};

for (const [selector, value] of Object.entries(fields)) {
  const el = document.querySelector(selector);
  if (!el) {
    console.warn('未找到元素：' + selector);
    continue;
  }
  el.value = value;
  el.dispatchEvent(new Event('input', { bubbles: true }));
}

上面这段代码做的是：按选择器找到输入框，写入值，并派发一个 input 事件，让依赖该事件的框架（Vue、React 这类）能感知到变化。只写 value 而不派发事件，是这类脚本最常见的失败原因。

1.2 接口层：直接调后端

如果有后端写入接口，绕过界面直接提交是最稳的。代价是需要鉴权与字段对齐，且绕过了前端校验。

1.3 AI 层：把非结构化内容变成字段

从邮件正文、扫描文本里抽出姓名、手机号、地址，输出一个 JSON，再交给上面两层去填。这是 AI 唯一该出现的位置。

二、最小示例：从一段文本抽出字段再填表

下面这段代码的用途是：把一段非结构化文本交给模型，要求它输出固定字段的 JSON，再把结果填进表单。示例在浏览器控制台里可运行，依赖 fetch 与 async 语法。

async function autoFill(rawText) {
  const resp = await fetch('https://www.w3cschool.cn/api/demo/extract', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ text: rawText, fields: ['name', 'phone', 'address'] })
  });

  const data = await resp.json();
  const map = { name: '#username', phone: '#phone', address: '#address' };

  for (const [key, selector] of Object.entries(map)) {
    const el = document.querySelector(selector);
    if (!el || !(key in data)) continue;
    el.value = data[key];
    el.dispatchEvent(new Event('input', { bubbles: true }));
  }
  return data;
}

autoFill('张三点了一份外卖，手机 13800000000，地址是杭州市西湖区').then(console.log);

上面这段代码做的是：把原始文本与期望字段发给抽取接口，拿到 JSON 后按映射表填进表单，最后把结果打印出来便于核对。预期结果（未执行，依据接口约定）是控制台打印出包含 name、phone、address 三个字段的对象。

校验这一步不能省。下面这段做的是在填入前检查字段是否齐全、格式是否合规。

function validate(data) {
  const errors = [];
  if (!/^1\d{10}$/.test(data.phone || '')) errors.push('手机号格式不对');
  if (!(data.address || '').length) errors.push('地址为空');
  return errors;
}

上面这段代码做的是检查手机号是否为 11 位数字、地址是否非空。修复方式是把校验放在填入之前，校验失败就不填，交给人工补，而不是先把脏数据写进去。

三、用错场景的三种表现

这三种情况我都建议改回规则方案。

3.1 字段天天变

模型的输出格式依赖你在提示词里给的字段定义。字段一改，提示词、映射表、校验规则三处都要跟着改。字段变动频繁的后台，规则方案反而更好维护。选择器的写法记不牢时，可以随时翻 JavaScript 速查手册 对照。

3.2 涉及金额、身份、权限

这类字段要求确定性和可审计。模型给出的值需要逐条核对，核对成本高于直接录入。

3.3 第三方页面有风控

在别人家的页面上做自动填写，可能触发风控，也可能违反对方的使用条款。这类场景应走官方接口，而不是模拟填写。

⚠️ 注意：把客户数据发给外部模型接口前，先确认合规要求。涉及身份证、银行卡、病历的字段，默认不要外发。

四、让它变好用的三个小改动

同样的功能，加上这三点体验差别很大。

4.1 填完给一次确认

自动填写不做静默提交。把抽出来的值高亮显示，让人扫一眼再点提交。

4.2 缺字段要明确提示

抽不出来的字段要显式标出来，而不是留空。留空会让使用者误以为原文本来就没有。

4.3 保留原始文本

把原始文本和抽取结果一起存下来。出了问题能回溯，也能拿这批数据去改进提示词。

总结

AI 智能表单自动填写的正确用法，是让模型只负责把非结构化文本转成结构化字段，填入和提交仍然交给确定性代码。判断该不该上 AI，看三件事：字段是否稳定、字段是否敏感、页面是否属于你自己。

要点带走：

• 输入已经是结构化的，就不要用 AI，直接映射更快更准；
• 填入前必须校验，校验失败走人工补录，不要静默写脏数据；
• 涉及金额、身份、权限的字段，以及别人的页面，都不适合自动填写。

想动手实现，建议先在一个字段少、结构固定的表单上跑通，再逐步扩大范围。前端基础若不熟，可以顺着 JavaScript 教程 补一遍选择器与事件部分。

常见问题

Q：AI 自动填写表单和普通自动化脚本有什么区别？

A：脚本只能处理字段位置固定的情况，AI 的价值在于把自然语言、扫描文本这类非结构化输入转成字段。两者是互补关系，不是替代关系。

Q：为什么填进去了但提交时提示为空？

A：多数是只改了 value 没派发 input 事件，框架内部状态没更新。补一次事件派发即可。

Q：能直接拿去填第三方网站的表单吗？

A：不建议。第三方页面常有风控，也可能在条款里禁止自动化操作，应优先走官方接口。

Q：抽取结果错了怎么排查？

A：保留原始文本与当次提示词，先看是原文歧义还是字段定义不清。原文有歧义就补上下文，字段定义不清就改字段说明。

延伸学习

想把这块做扎实，可以按这个顺序来：

1. 读一篇相关笔记 AI 自动化实战笔记，看真实场景怎么落地；
2. 想动手练，前端配套课程 把 DOM 与事件补牢；
3. 概念想再展开，可以看 AI 编程指南。