Vue + Vee验证3触发器手动验证

Question

我几乎可以完成表单验证-我正在将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>

Answer 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>