Vue3 TS 验证子组件中的表单，多级表单验证

1. 使用情形

在某些交互场景下，我们同一个页面会嵌套多个表单，例如表单2为表单1的子组件里的表单，但是我们需要在提交场景下同时验证表单1和表单2。

2. 子组件script中定义并expose

// 子组件表单验证
const validateForm = async () => {
  try {
    return await basicFormRef.value.validate()
  } catch (error) {
    return false
  }
}

defineExpose({ validateForm })

3. 父组件使用

BasicInfo 为子组件，绑定ref

<BasicInfo ref="basicInfoRef" v-model:createForm="onlineCreateForm.basicInfo" />

通过ref调用子组件expose出的validateForm方法，实现子组件中的表单验证

const basicInfoRef = ref()
const validateBasicInfoForm = async () => {
  const validateBasicInfo = await basicInfoRef.value.validateForm()
  if (validateBasicInfo) {
    // 验证成功后的操作
  } else {
    message.error('下一步操作失败：请先完善当前基本信息必填项！')
  }
}

通过上述方法的组合使用，就可以实现复杂的多表单页面的表单验证