vee-validate 提交时的无模型验证不起作用

Question

这似乎很简单，但我无法让它工作...

我想验证文件是否仅在单击验证按钮时设置。但 check 方法中的验证结果总是返回 false。

<template>
  <ValidationObserver>
    <form @submit.prevent>
      <ValidationProvider
        ref="aProvider"
        name="file"
        rules="required"
        v-slot="{ errors }"
      >
        <input type="file" />
        <p>{{ errors[0] }}</p>
      </ValidationProvider>
      <button @click="check">validate!</button>
    </form>
  </ValidationObserver>
</template>

<script>
export default {
  methods: {
    async check() {
      const { valid } = await this.$refs.aProvider.validate();
      if (valid) {
        alert("Form has been submitted!");
      }
    },
  },
};
</script>

codesandbox https://codesandbox.io/s/codesandbox- forked-6o7iyt?file=/src/Demo.vue

Answer 1

validate() 方法适用于观察者，而不适用于文档中指定的提供者：https://vee-validate.logaretm.com/v2/guide/components/validation-observer.html#methods

只需设置一个在观察者上 ref 并运行该方法。

<template>
  <ValidationObserver ref="form">
    <form @submit.prevent>
      <ValidationProvider
        name="file"
        rules="required"
        v-slot="{ errors }"
      >
        <input type="file" />
        <p>{{ errors[0] }}</p>
      </ValidationProvider>
      <button @click="check">validate!</button>
    </form>
  </ValidationObserver>
</template>

<script>
export default {
  methods: {
    async check() {
      const { valid } = await this.$refs.form.validate();
      if (valid) {
        alert("Form has been submitted!");
      }
    },
  },
};
</script>

Answer 2

创建一个数据属性并通过 v-model 将其绑定到输入。将您的引用移至 ValidationObserver。然后它将正确验证。