vue校验，多个组件中的多个表单校验_vue3 提交的时候 ,两个表单都验证-CSDN博客

本文链接：https://blog.csdn.net/weixin_42150719/article/details/124613846

本文介绍了在Vue.js应用中如何进行多个组件间的表单验证。通过获取子组件实例并利用refs的验证属性，可以实现对多个表单的有效校验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述

问题：多个子组件中点击提交按钮时候，要校验多个表单的必填项是否填写
在这里插入图片描述

解决方案：

提示：获取三个子组件的实例对象，然后通过refs的校验属性，校验所有表达


 submit() {
      // let form1Ref = this.$refs.weightInputRef.$refs['formRef']
      // let form2Ref = this.$refs.unloadInputRef.$refs['formRef']
      // let form3Ref = this.$refs.tareInputRef.$refs['formRef']
      // 提交的时候校验所有环节的表单
      const p1 = new Promise((resolve, reject) => {
        this.$refs.weightInputRef.$refs['formRef'].validate((valid) => {
          if (valid) {
            resolve() //完成态
          } else {
            reject() //已失败
          }
        })
      })
      const p2 = new Promise((resolve, reject) => {
        this.$refs.unloadInputRef.$refs['formRef'].validate((valid) => {
          if (valid) {
            resolve() //完成态
          } else {
            reject() //已失败
          }
        })
      })
      const p3 = new Promise((resolve, reject) => {
        this.$refs.tareInputRef.$refs['formRef'].validate((valid) => {
          if (valid) {
            resolve() //完成态
          } else {
            reject() //已失败
          }
        })
      })

      let form1 = this.$refs.weightInputRef.form
      let form2 = this.$refs.unloadInputRef.form
      let form3 = this.$refs.tareInputRef.form
      // // 车牌号转成字符串
      form1.carNum = form1.car_prefix.concat(form1.car_num)
      let formData = { ...form1, ...form2, ...form3 }
      formData.oprType = 'submit'

      let form = {
        ...formData,
        unloadStartTime: getDateLeftObj(formData.dateParams),
        unloadEndTime: getDateRightObj(formData.dateParams),
        bareWeightTime: getDateObj(formData.bareWeightTime),

        grossWeightTime: getDateObj(formData.grossWeightTime),
        qualityTime: getDateObj(formData.qualityTime),
        businessDate: getDateFromDateObj(formData.businessDate),
      }
      // 使用Promise.all去校验结果
      Promise.all([p1, p2, p3])
        .then(() => {
          saveInputManage(form).then((res) => {
            if (res.status !== 200) return this.$message.warning(res.msg)
            this.$message.success('操作成功！')
            this.$router.push({
              name: 'inputManage',
            })
          })
        })
        .catch((err) => {
          this.$message.error('称毛重、卸车、称皮重，各环节的必填项请填写完整后提交！')
        })
    },