Vue Vben Admin 中自定义表单组件的校验规则实现

在 Vue Vben Admin 项目中，使用 useVbenForm 进行表单开发时，经常会遇到需要自定义组件内部校验规则的场景。本文将深入探讨如何在不依赖表单自带 rules 的情况下，实现子组件内部的校验规则控制。

核心问题分析

当我们在表单中使用自定义组件时，传统的表单校验方式可能无法满足复杂场景的需求。特别是当：

1. 校验逻辑需要访问组件内部状态
2. 校验规则需要动态变化
3. 校验过程涉及异步操作

这种情况下，简单的 rules 配置就显得力不从心了。

解决方案实现

方案一：自定义校验函数

表单的 rules 属性支持自定义校验函数，我们可以利用这一点实现复杂校验：

{
  fieldName: 'customField',
  rules: [
    {
      validator: (_, value) => {
        // 这里可以访问组件实例
        return componentRef.value.validate(value);
      },
      trigger: 'change'
    }
  ]
}

方案二：组件暴露校验方法

更推荐的做法是让子组件暴露校验方法，然后在父组件中调用：

1. 子组件实现校验逻辑并暴露方法

// 子组件
const validate = () => {
  // 实现校验逻辑
  return new Promise((resolve) => {
    if (/* 校验通过 */) {
      resolve(true);
    } else {
      resolve('错误信息');
    }
  });
};

defineExpose({
  validate
});

2. 父组件通过 ref 调用校验方法

// 父组件
const customComponentRef = ref();

const handleSubmit = async () => {
  const result = await customComponentRef.value?.validate();
  if (result !== true) {
    // 处理错误
  }
};

方案三：结合表单上下文

对于更复杂的场景，可以结合表单上下文实现统一校验：

// 子组件
const formItemContext = inject(formItemContextKey, undefined);

const validate = () => {
  // 校验逻辑
  if (/* 校验失败 */) {
    formItemContext?.onFieldChange();
    return false;
  }
  return true;
};

最佳实践建议

1. 统一校验时机：确保子组件校验与表单校验同步触发
2. 错误反馈：子组件校验失败时应提供清晰的错误信息
3. 性能优化：避免在频繁触发的校验中执行复杂计算
4. 类型安全：为暴露的校验方法提供 TypeScript 类型定义

实际应用示例

以下是一个表格编辑组件的完整实现示例：

// 父组件
const formSchema = [
  {
    fieldName: 'editableTable',
    component: 'EditableTable',
    label: '可编辑表格',
    componentProps: {
      columns: [
        { field: 'name', title: '姓名', editRender: { name: 'input' } },
        { field: 'age', title: '年龄', editRender: { name: 'input' } }
      ],
      editRules: {
        name: [{ required: true, message: '姓名必填' }],
        age: [{ validator: (value) => value > 0, message: '年龄必须大于0' }]
      }
    }
  }
];

const editableTableRef = ref();

const validateTable = async () => {
  const isValid = await editableTableRef.value.validateAll();
  if (!isValid) {
    throw new Error('表格数据校验失败');
  }
};

// 子组件 EditableTable
const validateAll = async () => {
  let isValid = true;
  for (const row of tableData.value) {
    const result = await validateRow(row);
    if (result !== true) {
      isValid = false;
    }
  }
  return isValid;
};

defineExpose({
  validateAll
});

通过以上方法，我们可以灵活地实现各种复杂场景的表单校验需求，同时保持代码的可维护性和可扩展性。