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

Question

我的問題，有沒有辦法我們可以創建一個 one.js 文件和 state 全部extend(s) ？ 所以我們不需要在每次使用驗證器時都進行擴展。

我只是問，因為每次我需要驗證器時，我的代碼都會變得很長。 我需要先擴展它才能使用。

---

我目前正在使用vue & vuetify和vee-validate 。 下面的代碼工作正常參考。

模板

<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",
});

Answer 1

是的，您可以在一個文件中聲明所有配置，然后將其導入 main.js。 所以，你會有

// validationConfig.js

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

extend()
extend()
//etc

主要：

// main.js

import path/to/validationConfig

Answer 2

我認為您可以使用 mixins（ vuejs 2 ， vuejs 3 ）。 mixin object 可以包含任何組件選項。 您還可以全局應用 mixin。