Vue 3 表单校验需实现校验规则、表单数据、接口 DTO 类型对齐，使用泛型 FormRules、类型安全的 prop 路径、显式 validator 参数类型及共用 DTO 接口，确保全程类型安全。
Vue 3 表单校验结合 TypeScript，核心在于让校验规则、表单数据、接口 DTO 三者类型对齐，避免手动写字符串字段名、硬编码错误提示，或运行时才暴露字段缺失问题。关键不是“怎么加类型”，而是“类型如何贯穿整个校验链路”。
校验规则对象必须带泛型
Element Plus 的 FormRules 或自定义规则类型，不能用 Record 敷衍。要基于具体表单数据结构生成强类型规则：
- 先定义表单数据的接口，比如资金分配项：
interface CapitalAllocateItem {<br> deptId: number;<br> total: number;<br> budget: string;<br> payType: string;<br> payMode: string;<br>} - 再用
FormRules声明规则变量，IDE 就能自动推导每个字段可配哪些校验项，拼错totol这类字段名会直接报错 - 推荐用
computed包裹规则对象，确保依赖变化时规则实时更新（如最大可分配金额动态计算）
el-form-item 的 prop 属性要类型安全
模板中 :prop 的值是字符串，但容易写错。解决办法有两个层级：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 对普通字段（如
deptId），直接写:prop="'deptId'"—— 虽然仍是字符串，但配合上面的泛型规则，IDE 在输入时会有字段名提示，且拼错后规则对象里找不到对应 key，ts 编译会告警 - 对表格内嵌表单（如
el-table每行一个el-form-item），prop 需拼接索引：:prop="`allocateDatas.${index}.total`"。这时建议把路径提取成类型安全的工具函数，例如：const fieldPath = (i: number, key: keyof CapitalAllocateItem) => `allocateDatas.${i}.${key}`;
调用时:prop="fieldPath(index, 'total')"，字段名受接口约束，不会越界
自定义 validator 函数必须标注参数类型
Element Plus 的 validator 回调中，value 类型默认是 any，极易出错。务必显式标注：
-
validator: (rule, value: number, callback) => { ... }—— 明确知道value是数字，可直接做判断，不用再typeof value === 'string'转换 - 若字段是联合类型（如
string | number），也应按实际业务逻辑标注，避免后续运算出NaN - 注意：无论校验通过与否，
callback()必须被调用一次，否则表单卡在 loading 状态 —— 这不是类型问题，但和类型安全一样属于关键约定
后端 DTO 与表单数据共用同一接口
别让表单数据类型（CapitalAllocateItem）和 API 请求体类型（CapitalAllocateCreateDTO）分开定义。它们本质是同一份契约：
- 直接复用接口，或用
type FormDTO = CapitalAllocateCreateDTO建立别名 - 提交前做一次类型断言校验（非强制，但推荐）：
if (!isValidForm(formValue)) { /* 提示缺失必填字段 */ }
其中isValidForm可基于接口必选字段做简单运行时检查，补全编译期无法覆盖的场景（如用户删光了所有表格行）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
