Vue + Vee Validate 3 触发手动验证答案

【问题标题】：Vue + Vee Validate 3 Trigger Manual ValidationVue + Vee Validate 3 触发手动验证
【发布时间】：2020-02-29 05:51:36
【问题描述】：

我的表单验证几乎可以工作了——我正在使用 Vee Validate 3 和 Vue.js。 Vee Validate 的大多数示例都是针对版本 2 的，所以我有点挣扎。

我遇到的问题是提交表单时触发验证。

如果我先单击文本字段以关注它，然后单击提交，验证会触发，我会看到错误消息。

但是，如果我不先单击文本字段并仅单击提交按钮，则看不到错误消息。

如何在点击提交之前不必专注于文本字段来完成这项工作？

更新

奇怪的是，控制台在两种情况下都显示错误TypeError: this.validate is not a function - 无论验证是否有效。

<ValidationProvider rules="required" v-slot="{ validate, errors }">
  <div>
    <input type="text" rules="required">
    <p id="error">{{ errors[0] }}</p>
  </div>
</ValidationProvider>

<script>
export default {
  methods: {
    async validateField() {
      const valid = await this.validate()
    }
  }
};
</script>

【问题讨论】：

我没有使用 v3.0 但是 1. 你能显示整个代码吗？ 2.你检查ValidationObserver了吗？ logaretm.github.io/vee-validate/guide/…
@Adam，我会试试 ValidationObserver - 它看起来很有希望。我将在这里报告我的发现。谢谢

标签： vue.js vee-validate

【解决方案1】：

Adam 通过 ValidationObserver 为我指明了正确的方向。

此代码对我有用...

<ValidationObserver ref="observer" v-slot="{ invalid }" tag="form" @submit.prevent="submit()">
  <ValidationProvider rules="required" v-slot="{ errors }">
    <input type="text">
    <p id="error">{{ errors[0] }}</p>
  </ValidationProvider>
  <button @click="submit()">Submit>/button>
</ValidationObserver>

<script>
import { VslidationProvider, ValidationObserver } from 'vee-validate'
import { required } from 'vee-validate/dist/rules'

export default {
  methods: {
    async submit () {
      const valid = await this.$refs.observer.validate()
    }
  }
};
</script>

【讨论】：

【解决方案2】：

新方法

<ValidationObserver v-slot="{ handleSubmit }">
  <ValidationProvider rules="required" v-slot="{ errors }">
    <input type="text">
    <p id="error">{{ errors[0] }}</p>
  </ValidationProvider>
  <button @click="handleSubmit(onSubmit)">Submit>/button>
</ValidationObserver>

<script>
import { VslidationProvider, ValidationObserver } from 'vee-validate'

export default {
  methods: {
    onSubmit() {
      // ...
    }
  }
};
</script>

【讨论】：