Как настроить vee-validate глобально в vue? - PullRequest
Новая
       125

Как настроить vee-validate глобально в vue?

0 голосов
/ 03 августа 2020

Мой вопрос, есть ли способ создать файл. js и указать все 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",
});

Ответы [ 2 ]

0 голосов
/ 03 августа 2020

Я думаю, вы можете использовать миксины. Объект миксина может содержать любые параметры компонента. Вы также можете применить миксин глобально. https://v1.vuejs.org/guide/mixins.html

0 голосов
/ 03 августа 2020

Да, вы можете объявить всю свою конфигурацию в одном файле, а затем импортировать его в свой main. js. Итак, у вас будет 

// validationConfig.js

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

extend()
extend()
//etc

В основном: 

// main.js

import path/to/validationConfig
...