多个表单验证的实现

一，实现效果

这三个表单是独立的，需要在提交前验证其值的有效性。

二，实现代码

    //上传表单
    submitBtn(formName){
      this.$refs[formName].validate((valid) => {
          if (valid) {
            this.handleBeforeSubmit()
          } else {
            return false
          }
      });
    },

    //上传表单前验证
    handleBeforeSubmit(){
      if(this.vaildDishesFormat()){
         this.submit()  //全部验证完成之后再发起请求
      }
    },

    //表单的验证函数
    vaildDishesFormat(){
      let that=this
      let arr=that.goodInfoList.dishFormatTypeList
      // //验证规格表单
      for (let i=0;i<arr.length;i++){
        if(arr[i].title===''|| arr[i].fenshu===''){
          that.$message.warning(`第${i+1}项套餐的表头参数输入不完整，请输入完整套餐参数`)
          console.log(arr)
          return false
        }
        let arr2=arr[i].dishesFormatList
        for(let j=0;j<arr2.length;j++){
          if(arr2[j].title ===''|| arr2[j].price===''|| arr2[j].bixuan==='' || arr2[j].stock===''){
            this.$message.warning(`第${i+1}项套餐下第${j+1}项套餐参数输入不完整，请输入完整菜品参数`)
            return false
          }
        }
      }
      return true
    },

三，官网方式的表单验证的实现