Vue3多个表单提交校验—Promise 这次项目中有个界面有三个表单，当提交的时候需要进行三个表单

这次项目中有个界面有三个表单，当提交的时候需要进行三个表单的校验。我来分享一下我的做法：

效果图：

当点击提交后要对三个表单进行校验

html代码：

（这次用的vant组件库）

看出来是三个vant-form表单，依次定义他们的ref

js代码：

//定义
const formRule = ref()
const formRule2 = ref()
const formRule3 = ref()

// 提交
const onSubmit = () => {
  Dialog.confirm({
    title: '提交操作',
    message: '您确定要提交数据吗？',
  }).then(() => {
//定义一个变量来装载
    let formRuleValidates = [
      formRule.value.validate(),
      formRule2.value.validate(),
      formRule3.value.validate(),
    ]
//用Promise.all方法判断所有promise对象
    Promise.all(formRuleValidates).then(() => {
      addVideo({
        srvAlarmName: form.value.alarmPerson,
        srvAlarmPhone: form.value.phoneNumber,
        srvCampus: form.value.location,
        srvCreateId: JSON.parse(sessionStorage.getItem('userId')),
        srvCreateName: form.value.acceptor,
        srvDescription: form.value.briefInformation,
        srvEndTime: form.value.endTime,
        srvEventTypeId: form.value.eventType,
        srvIdcard: form.value.idNumber,
        srvKey: form.value.keyWord,
        srvPlace: form.value.srvPlace,
        srvStartTime: form.value.startTime,
        srvUnitProfessional: form.value.company,
        srvVideoType: form.value.srvVideoType,
        srvReferenceDepartment: form.value.srvReferenceDepartment,
      })
        .then((res) => {
          if (res.code == 200) {
            toast('提交成功！')
            setTimeout(() => {
              router.push('/apply')
            }, 500)
          }
        })
        .catch(() => {})
    })
  })
}