使用vee-validate时表单数据无效如何阻止多个提交按钮的onClick事件

vee-validate本身提供了更简洁的内置能力，无需在每个按钮的点击逻辑里重复写校验代码，常用两种方案适配不同场景：

方案1：利用ValidationObserver作用域插槽的内置状态（最推荐） #

ValidationObserver的默认作用域插槽会直接暴露invalid/valid等响应式状态，会自动同步所有子ValidationProvider的校验结果，你可以直接用这个状态绑定按钮的disabled属性，从交互层面直接阻止未校验通过时的点击触发，完全不需要手动调用校验方法：

<validation-observer ref="myValidator" v-slot="{ invalid }">
  <form>
    <validation-provider rules="required" v-slot="{ errors }">
      <input type="text">
      <span>{{ errors[0] }}</span>
    </validation-provider>
    <validation-provider rules="required" v-slot="{ errors }">
      <input type="text">
      <span>{{ errors[0] }}</span>
    </validation-provider>
    <!-- 校验未通过时按钮直接禁用，无法触发点击事件 -->
    <button :disabled="invalid" @click="method1">执行方法1</button>
    <button :disabled="invalid" @click="method2">执行方法2</button>
  </form>
</validation-observer>

如果你的业务不允许禁用按钮，只是需要点击时拦截逻辑，可以用方案2。

方案2：封装通用校验高阶函数 #

把校验逻辑封装成通用的包装函数，所有需要校验的按钮点击都用这个函数包裹业务方法，不需要修改原有业务逻辑，也不用重复写校验代码：

逻辑封装 #

methods: {
  // 通用校验包装函数
  async withValidate(execFn, ...args) {
    const isValid = await this.$refs.myValidator.validate()
    if (isValid) {
      return execFn(...args)
    }
  },
  // 原有业务方法无需修改
  method1(param) {
    // 方法1的原有逻辑
  },
  method2(param1, param2) {
    // 方法2的原有逻辑
  }
}

模板使用 #

<button @click="withValidate(method1, '自定义参数1')">执行方法1</button>
<button @click="withValidate(method2, '参数A', '参数B')">执行方法2</button>

注意事项 #

ValidationObserver的validate方法是异步方法，必须用async/await等待校验完成后再判断结果，直接同步判断会拿到未完成的Promise对象导致逻辑错误。

内容的提问来源于stack exchange，提问作者Fenix