如何使绑定专属接口的表单验证函数实现多场景复用？

定义通用字段基础类型 #

先约定所有表单字段的基础结构，确保每个字段都包含error和errorText属性，同时支持扩展自定义属性：

interface FormFieldBase {
  error: boolean;
  errorText: string;
}

改造为泛型验证函数 #

将原函数改为泛型实现，摆脱对特定UserInterface的依赖，适配任意符合结构的表单数据：

const InvalidateAllFields = <T extends Record<string, FormFieldBase>>(
  error: unknown,
  data: T
): T => {
  if (error instanceof z.ZodError) {
    const { fieldErrors } = error.flatten();
    for (const key of Object.keys(data)) {
      const indexKey = key as keyof T;
      const fieldError = fieldErrors[indexKey];
      data[indexKey].error = !!fieldError;
      data[indexKey].errorText = fieldError?.[0] ?? '';
    }
  }
  return data;
};

使用示例 #

以用户表单为例，只需让你的表单接口继承通用结构即可：

// 自定义用户表单字段，扩展基础属性
interface UserFormField extends FormFieldBase {
  value: string;
}

// 用户表单数据结构
interface UserInterface {
  username: UserFormField;
  email: UserFormField;
  password: UserFormField;
}

// 初始化表单数据
const userFormData: UserInterface = {
  username: { error: false, errorText: '', value: '' },
  email: { error: false, errorText: '', value: '' },
  password: { error: false, errorText: '', value: '' },
};

// 调用验证函数，自动适配UserInterface类型
const validatedData = InvalidateAllFields(zodValidationError, userFormData);

核心优势 #

• 类型安全：泛型约束确保传入的表单数据每个字段都包含必要的error和errorText，返回值与输入类型完全一致
• 高度复用：只要表单字段遵循FormFieldBase结构，无论是什么业务场景的表单，都能直接使用这个验证函数
• 灵活扩展：每个表单字段可以根据需求添加自定义属性（如value、placeholder等），不影响验证逻辑

内容的提问来源于stack exchange，提问作者zhyp