vue el-from校验成功但是 return不管用？

Question

async handleSubmit() {
      const flag = await this.$refs.form.validate().catch((e) => e)
      if (!flag) return
      this.loading = true
      try {
        await queryVipStandardEdit({
          ...this.form,
        })
        this.$message.success(this.$t('pls_operate_successful') + '！')
        this.close('success', true)
      } catch (error) {
        this.$message.error(error)
      } finally {
        this.loading = false
      }
    },

校验生效了，但是if (!flag) return不管用，依然回走下面方法，哪里写错了

Answer 1

把 catch 去掉就行了

async handleSubmit() {
  await this.$refs.form.validate();

  // ...
}

Answer 2

未通过的时候 flag返回的是校验规则列表 你可以打印出来看看

Answer 3

可以这样写

async handleSubmit() {
      //如果校验不通过，就会抛异常
      await this.$refs.form.validate()
      this.loading = true
      try {
        await queryVipStandardEdit({
          ...this.form,
        })
        this.$message.success(this.$t('pls_operate_successful') + '！')
        this.close('success', true)
      } catch (error) {
        this.$message.error(error)
      } finally {
        this.loading = false
      }
    },

Answer 4

在await之后就表示校验成功了

async handleSubmit() {
    await this.$refs.form.validate()
    try {
        this.loading = true
        const params = { ...this.form }
        await queryVipStandardEdit(params)
        this.$message.success(this.$t('pls_operate_successful') + '！')
        this.close('success', true)
    } catch (error) {
        this.$message.error(error)
    } finally {
        this.loading = false
    }
},