Element Plus 的 el-form 能快速完成必填、长度、格式等校验。但真实后台项目里，表单体验好不好，往往取决于另一件事：接口返回的错误能不能准确映射到字段，用户能不能知道下一步该改什么。
这篇文章讲一套可维护的表单校验流程，适合新增、编辑、设置页和复杂业务表单。建议先读 Element Plus 后台页面组织指南 和 Vue 表单最佳实践。
先给结论：表单错误要分三层处理
| 错误层级 | 示例 | 展示位置 |
|---|---|---|
| 本地字段校验 | 必填、长度、格式 | 字段下方 |
| 接口字段错误 | 名称重复、权限不足、状态冲突 | 对应字段或字段组 |
| 全局提交错误 | 网络失败、服务异常 | 顶部提示或消息条 |
不要把所有错误都弹 toast。用户需要知道“哪个字段错了、为什么错、怎么改”。
一、本地 rules 只负责前置反馈
本地校验适合处理确定性规则：必填、长度、格式、数值范围。
const rules = {
name: [
{ required: true, message: '请输入名称', trigger: 'blur' },
{ min: 2, max: 40, message: '名称长度为 2-40 个字符', trigger: 'blur' }
],
url: [
{ type: 'url', message: '请输入有效链接', trigger: 'blur' }
]
}
本地 rules 不应该假装能替代服务端校验。例如名称唯一性、权限范围、业务状态冲突，最终仍要以接口结果为准。
二、提交流程要固定，不要每个页面自由发挥
推荐把提交流程固定成：
validate -> normalize payload -> submit -> map errors -> refresh or stay
示例：
const submit = async () => {
if (!formRef.value) return
const valid = await formRef.value.validate().catch(() => false)
if (!valid) return
saving.value = true
serverErrors.value = {}
try {
await saveUser(buildPayload(model))
closeDialog()
await reloadList()
} catch (error) {
applyServerErrors(error)
} finally {
saving.value = false
}
}
流程稳定后，团队协作会轻松很多。
三、接口错误要有标准结构
前后端最好约定统一错误格式：
{
"message": "表单信息需要调整",
"fields": {
"name": "名称已存在",
"email": "邮箱格式不可用"
}
}
前端拿到后，把字段错误放到对应表单项附近，全局错误放到表单顶部。这样用户不用猜。
如果后端暂时无法返回标准结构，也建议在前端建立适配层，不要让每个页面单独解析错误。
四、动态表单要稳定字段路径
动态数组表单最容易出错。例如多个联系方式、多个价格项、多个规则项。字段路径必须稳定：
items.0.title
items.0.value
items.1.title
items.1.value
如果列表可以排序或删除，最好给每一项保留临时 id，并在提交前再整理 payload。否则接口错误回填时，很容易映射到错误行。
五、错误文案要告诉用户下一步
错误提示不只是“格式错误”。更好的提示应该包含可执行信息：
| 弱提示 | 更好的提示 |
|---|---|
| 输入错误 | 请输入 2-40 个字符的名称 |
| 保存失败 | 保存失败，请检查名称是否重复 |
| 链接错误 | 链接需要以 https:// 开头 |
表单体验的关键是减少用户猜测。
六、失败案例：接口错误全部 toast，用户不知道改哪里
一个后台编辑页有 12 个字段。提交失败时只弹出“保存失败”，用户需要逐项猜。客服反馈后，团队开始把接口字段错误映射到表单项：名称重复显示在名称字段下，链接不可用显示在链接字段下，全局权限问题显示在顶部。
修复后，提交失败率没有立刻下降，但二次提交成功率明显提高。因为用户终于知道该改哪里。
七、表单校验 Checklist
- 本地 rules 是否只处理确定性规则
- 提交流程是否统一包含 validate、payload、submit、map errors
- 接口字段错误是否能回填到对应字段
- 全局错误是否有顶部提示，而不是只靠 toast
- 保存中是否禁用重复提交
- 关闭弹窗后是否清理 model 和 errors
- 动态表单字段路径是否稳定
结语
Element Plus 表单的重点不是把 rules 写满，而是让本地校验、接口错误和用户下一步动作连起来。错误提示越靠近问题字段，用户越容易完成修正，页面也越容易长期维护。
延伸阅读：
