如何在 vue 中全局配置 vee-validate？答案

【问题标题】：How to configure vee-validate globally in vue?如何在 vue 中全局配置 vee-validate？
【发布时间】：2020-11-23 22:16:28
【问题描述】：

我的问题，有没有一种方法可以创建一个 .js 文件并声明所有 extend(s)？所以我们不需要在每次使用验证器时都进行扩展。

我只是问，因为每次我需要验证器时，我的代码都会变得很长。我需要先扩展它才能使用。

我目前正在使用 vue 和 vuetify 和 vee-validate。以下代码工作正常reference。

模板

<ValidationObserver ref="observer" v-slot="{ validate, reset }">
    <ValidationProvider v-slot="{ errors }" name="Name" rules="required|max:10">
        <v-text-field v-model="user.name" :error-messages="errors" label="Name" type="text"></v-text-field>
    </ValidationProvider>
</ValidationObserver>

脚本

import { confirmed, required, email, max } from "vee-validate/dist/rules";
import { extend, ValidationObserver, ValidationProvider, setInteractionMode } from "vee-validate";

setInteractionMode("eager");

extend("required", {
  ...required,
  message: "{_field_} can not be empty",
});

extend("confirmed", {
  params: ["target"],
  validate(value, { target }) {
    return value === target;
  },
  message: "{_field_} does not match",
});

extend("max", {
  ...max,
  message: "{_field_} may not be greater than {length} characters",
});

extend("email", {
  ...email,
  message: "Email must be valid",
});

【问题讨论】：

标签： javascript vue.js vuejs2 vuetify.js vee-validate

【解决方案1】：

是的，您可以在一个文件中声明所有配置，然后将其导入您的 main.js。所以，你会有

// validationConfig.js

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

extend()
extend()
//etc

主要：

// main.js

import path/to/validationConfig

【讨论】：

您仍然可以使用相同的模板，只需按名称引用您的规则，并且应该使用全局配置。

【解决方案2】：

我认为你可以使用 mixins (vuejs 2, vuejs 3)。 mixin 对象可以包含任何组件选项。您也可以全局应用 mixin。

【讨论】：