Vee-Validate 中条件性验证方案的最佳实践

理解条件性验证需求

在表单开发中，我们经常会遇到需要根据某些条件动态调整验证规则的情况。Vee-Validate 作为 Vue 生态中流行的表单验证库，提供了灵活的方式来实现这一需求。

问题分析

开发者在使用 Vee-Validate 的 useForm 组合式 API 时，尝试通过计算属性动态返回验证方案，但遇到了验证规则不生效的问题。核心问题在于如何正确地将动态验证方案与 useForm 集成。

解决方案

正确的计算属性使用方式

在 Vue 3 的组合式 API 中，计算属性需要通过 .value 访问其值，但在 useForm 的配置中直接传递计算属性本身即可，Vue 会自动处理响应性：

const validationSchema = computed(() => {
  return parentType.value === parentFinancingRequests.opex
    ? {
        duration: yup.string().required('error'),
        amount: yup.string().required('error')
      }
    : {}
})

const { handleSubmit } = useForm({
  validationSchema: yup.object().shape(validationSchema.value)
})

更优雅的实现方式

对于更复杂的条件验证，可以考虑以下模式：

1. 定义基础验证规则：

const baseSchema = {
  // 公共字段验证
  commonField: yup.string().required()
}

2. 创建条件验证扩展：

const conditionalSchema = computed(() => {
  const additionalRules = {}
  
  if (someCondition.value) {
    additionalRules.specialField = yup.string().required()
  }
  
  return additionalRules
})

3. 合并验证方案：

const fullSchema = computed(() => ({
  ...baseSchema,
  ...conditionalSchema.value
}))

const { handleSubmit } = useForm({
  validationSchema: yup.object().shape(fullSchema.value)
})

注意事项

1. 响应性保证：确保所有依赖的条件都是响应式的（使用 ref 或 computed）

2. Yup 对象处理：当使用 Yup 时，注意 .shape() 方法的正确使用

3. 性能考虑：复杂的计算属性可能会影响性能，应保持验证规则的简洁性

4. 默认值处理：对于条件性字段，考虑在表单值中提供合理的默认值

高级技巧

对于更复杂的场景，可以结合 when 条件验证：

const schema = yup.object({
  fieldA: yup.string(),
  fieldB: yup.string().when('fieldA', {
    is: (val) => val === 'special',
    then: yup.string().required()
  })
})

这种方式允许字段间的条件验证，而不需要完全重建验证方案。

总结

Vee-Validate 提供了强大的工具来实现条件性表单验证。通过合理使用计算属性和 Yup 验证器，开发者可以创建灵活、响应式的表单验证逻辑。关键在于理解 Vue 的响应式系统如何与验证库协同工作，以及如何有效地组织验证规则的结构。