求助前端大佬,表单验证this.$refs["formMenu"].validate()总是返回false的问题

在一次重新下载node_modules包之后,所有页面的保存更新提交按钮全都失效了,调试了一下,发现验证方法总是返回false。
代码如下:

handleSubmitMenu() {
      let valid = this.validateMenuForm();
      console.log("最终的valid:"+valid);
      if (valid) {
        if (this.formModel.mode === "create") {
          this.doCreateMenu();
        }
        if (this.formModel.mode === "edit") {
          this.doEditMenu();
        }
      }
    },
    
validateMenuForm() {
      let _valid = false;
      console.log("formMenu object:"+this.$refs["formMenu"]);
      console.log("formMenu status:"+this.$refs["formMenu"].validate());
      console.log("formMenu object:"+this.$refs.formMenu);
      console.log("formMenu status:"+this.$refs.formMenu.validate());
      this.$refs["formMenu"].validate(
        valid => {
        if (!valid) {
           console.log("valid if:"+valid)
          this.$Message.error(this.$t('请完善信息'));
          _valid = false;
        } else {
           console.log("valid else:"+valid)
          _valid = true;
          console.log("_valid else:"+_valid)
        }
      });
       console.log("最终:_valid:"+_valid)
      return _valid;
    },

我实在看不出代码有啥问题,如果我没完成必要的信息时,能够进if语句提醒,完善信息之后再提交,则验证方法里的else字句的代码总是返回不对。

表单未完善时的执行log:
image.png
表单完善时的执行log:
image.png

使用的是Vue的iview-admin框架,求助,万分感谢!!!

阅读 5.6k
1 个回答

elForm的validate方法的回调并不是同步的,而是在Promise中,所以你这么写肯定是不对的

async handleSubmitMenu() {
  let valid = await this.validateMenuForm();
  console.log("最终的valid:"+valid);
  if (valid) {
    if (this.formModel.mode === "create") {
      this.doCreateMenu();
    }
    if (this.formModel.mode === "edit") {
      this.doEditMenu();
    }
  }
},

async validateMenuForm() {
  let _valid = false;
  console.log("formMenu object:"+this.$refs["formMenu"]);
  console.log("formMenu status:"+this.$refs["formMenu"].validate());
  console.log("formMenu object:"+this.$refs.formMenu);
  console.log("formMenu status:" + this.$refs.formMenu.validate());
  try {
    _valid = await this.$refs["formMenu"].validate();
  } catch (error) {
    this.$Message.error(this.$t('请完善信息'));
    _valid = false
  }
  console.log("最终:_valid:"+_valid)
  return _valid
},
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题