表单是业务应用里很常见的模块，也很适合用 AI Coding 辅助开发。以失物招领发布页为例，用户需要填写物品名称、地点、信息类型和补充描述。如果只让 AI 生成几个输入框，页面虽然成形了，但必填校验、错误提示和重复提交等细节往往会被遗漏。

我通常先定义规则，再让 AI 写代码：物品名称和地点必填；名称去掉首尾空格；提交时显示处理中状态；校验失败时明确指出问题；提交成功后清空表单或返回上一页。把规则写成清单，既能减少返工，也方便后续测试。

下面是一个精简的校验函数。实际项目可以把校验逻辑抽离为独立模块，避免页面组件越来越臃肿。

我的代码：

interface LostItemForm {

 name: string

 location: string

 description: string

}

function validateForm(form: LostItemForm): string | null {

 if (!form.name.trim()) return '请填写物品名称'

 if (!form.location.trim()) return '请填写丢失或拾取地点'

 if (form.name.trim().length > 40) return '物品名称不能超过 40 个字符'

 if (form.description.length > 200) return '补充描述不能超过 200 个字符'

 return null

}

const error = validateForm({

 name: itemName,

 location: itemLocation,

 description: itemDescription

})

if (error) {

 promptAction.showToast({ message: error })

 return

}

// 校验通过后，再执行保存或接口请求

让 AI 生成表单时，我还会特别提醒它区分前端校验和服务端校验。前端校验主要改善体验，不能代替服务端对数据合法性、权限和重复提交的检查。即使界面已经限制输入，接口仍然需要重新验证。

代码完成后，我会让 AI 根据规则生成测试用例，再手动验证边界情况，例如全是空格、超长文本、快速连续点击提交，以及请求失败后能否再次提交。对于重复提交，可以在请求开始时设置 loading 状态，在成功或失败后恢复按钮状态。

AI 很擅长补齐重复性的校验代码，但规则是否符合业务实际，需要开发者先定义清楚。像联系方式、图片数量和文本长度这样的规则，也应该与产品要求、后端限制保持一致。