vee-validate 3 + nuxt仅在提交时显示错误

问题描述

我很难确定仅在提交时触发错误的表单验证。 我不想显示内联错误的主要原因是因为这篇文章暗示内联错误比在提交时提供错误消息更糟糕的用户体验：

https://uxmovement.com/forms/why-users-make-more-errors-with-instant-inline-validation/

即使vee-validate 3文档指出提交之前进行验证是“必须”：

https://logaretm.github.io/vee-validate/guide/forms.html#basic-example

不幸的是，这篇帖子涵盖了vee-validate 2而不是3：

How do I stop displaying the inline validation error message in Vuetify?

这篇文章谈论如何在提交时捕获错误，但是我不明白在提交之前如何禁用错误： Vee Validate 3 catch errors on form submit

Vee-validate 2对此有一些明确的说明，但是我似乎无法在Vee-validate 3文档中找到它： https://vee-validate.logaretm.com/v2/guide/events.html#changing-events-per-field

我正在使用Vuetify和Nuxt，并在我的插件中注册了vee-validate：

import { extend } from "vee-validate";
import { required,email } from "vee-validate/dist/rules";

extend("required",{
    ...required,message: "This field is required"
});

extend("email",{
  ...email,message: "This field must be a valid email"
});

我的表单代码：

 <ValidationObserver
    ref="form"
    v-slot="{ invalid,validated,handleSubmit,validate }"
  >
    <v-form @submit.prevent="onSubmit">
      <ValidationProvider
        name="email"
        rules="required|email"
        v-slot="{ errors,valid }"
      >
        <v-text-field
          v-model="email"
          :error-messages="errors"
          :success="valid"
          label="E-mail"
          required
        ></v-text-field>
      </ValidationProvider>

      <ValidationProvider
        name="password"
        rules="required|max:50"
        v-slot="{ errors,valid }"
      >
        <v-text-field
          v-model="password"
          :counter="50"
          type="password"
          :error-messages="errors"
          :success="valid"
          label="Password"
          required
        ></v-text-field>
      </ValidationProvider>
    
      <v-btn color="primary" type="submit">Submit</v-btn>
    </v-form>

脚本部分：

<script>
import { ValidationObserver,ValidationProvider } from "vee-validate";
export default {
  components: {
    ValidationObserver,ValidationProvider,},data: () => ({
    password: "",email: "",}),methods: {
    onSubmit() {
      this.$refs.form.validate().then((success) => {
        if (!success) {
          // run your error code here
        }

        alert("Form has been submitted!");
      });
    },};
</script>

提交会触发错误，但不会阻止它们也以内联方式显示。 感谢所有反馈和答复，我想我的最后一招是切换到vee-validate 2，但这是希望有人知道它在vee-validate 3中是如何完成的。

编辑：

我唯一能想到的解决方案是在覆盖错误消息的字段上设置hide-details =“”，但不覆盖红色下划线，仅附加一个跨度，该跨度由v-if触发。我怀疑这是否是一个好的解决方案，并且希望对其进行更新。

<v-text-field
              v-model="email"
              :error-messages="errors"
              :success="valid"
              label="E-mail"
              required
              hide-details=""
            ></v-text-field>
             <span v-if="submitted">{{errors[0]}}</span>

解决方法

您可以将交互模式设置为passive，该模式在任何事件上均无效。 interaction and ux部分的文档中对此进行了提及。这相当于v2中的events。

https://logaretm.github.io/vee-validate/guide/interaction-and-ux.html#passive