vue同时校验多个表单

• 最开始的想法是将两个表单绑定同一个ref，这样在调用ref.value.validate()是否可以同时校验两个表单呢？

（1） 修改两个表单同时绑定formARef，点击按钮进行校验：
只有第二个表单进行校验了，这是因为在 Vue3 中，使用 ref 绑定表单元素时，如果你给两个不同的表单元素都绑定了相同的 ref，例如 ref="formRef"，那么在访问formRef.value 时，实际上只能引用到最后一个具有相同 ref 的表单元素。这是因为 ref 是唯一标识符，不同的 ref 值对应不同的元素或组件实例。简单理解来说就是第二个组件实例会将第一个组件实例覆盖掉，所以才会造成只有第二个表单进行了校验，而第一个表单无反应的情况。
（2）那么，我们重新将两个表单绑定两个ref，分别为 formARef 和 formBRef。另外一种思路是我们依次校验formA 和 formB，在formA校验通过后再校验formB是否可行呢？
其实是可行的，但是问题也很明显

    1.从开发角度讲，代码嵌套层数过多，如果是表单更多只会更严重，严重影响代码易读性和可维护性。

    2.从用户角度讲，校验不全，当表单A校验不通过时，无法校验表单B，一旦表单过多，用户可能需要多次校验多次修改才可校验通过，十分影响用户体验。

****解决方案 ****
1.使用async await
我们先查看检验返回的结果。

   const checkForm = () => {
      const formValidA = formARef.value.validateField()
      const formValidB = formBRef.value.validateField()
      console.log(formValidA) // Promise <pending>
      console.log(formValidB) // Promise <pending>
   }

通过打印校验的返回结果可以看到返回的是一个pending状态的Promise。这是因为许多表单验证库（如 VeeValidate 或 Element Plus 等）在进行异步验证时会返回 Promise 以便处理异步操作。在这种情况下，validateField方法会返回一个 Promise，而不是直接返回一个布尔值。既然是Promise，我们可以使用async await 去接收Promise返回成功的结果
打印一下，如果校验成功的话，返回的结果为true，如此我们就可以通过判断 true / false 来判断当前的校验结果。但是当校验失败时，控制台会报警告：“Unhandled error during execution of component event handler”，原因是当校验失败是，Promise会抛出异常而又没有被及时捕获所导致，故而，我们用try catch捕获这个异常：

   const checkForm = async () => {
      try {
         const formValidA = await formARef.value.validateField()
         const formValidB = await formBRef.value.validateField()
         if (formValidA && formValidB) {
            /**  
             * 执行校验通过后的逻辑
             * 下一步操作...
             * 发请求...
             * 页面跳转...
             */
         }
      } catch (error) {
         /**
          * 执行校验失败抛出异常的逻辑
          */
      }
   }

由于我这次的页面有5个表单，而表单4、5在表单2某字段值为true时显示，所以在我用了上面方法统一处理几个表单时发现，前3个表单都可以正常返回，而当我把4、5表单写入时，会报错“resource.vue:1173 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'validateField')at comfirmdemand (resource.vue:1173:1)”，因为在在表单2某字段值为false时，表单4、5都没显示，Ref.value.validateField()根本读取不到，所以加上判断条件，当表单2某字段为true时去操作表单4、5：

if (demandForm.value.lifting) {
    formName.value = await Promise.all([demandFormRef1.value.validateField(), demandFormRef2.value.validateField(), demandFormRef3.value.validateField(), demandFormRef4.value.validateField(), demandFormRef5.value.validateField()])
  } else {
    formName.value = await Promise.all([demandFormRef1.value.validateField(), demandFormRef2.value.validateField(), demandFormRef3.value.validateField()])
  }

参考文章：https://blog.csdn.net/weixin_66406649/article/details/139685992