vee-validate - VeeValidate 3.1 如何在外部文件和每个组件中添加规则

Question

我能够很好地使用规则，但我必须在每个组件中都有它们，这不是 DRY 而是杂乱无章。我要加rules.js用于验证的文件，但是在文件中您只是扩展了一个类，所以我不确定如何在将文件导出和导入到组件中或使它们全局化方面实现这一点，我想这样做，因为我有很多表单在应用程序中。

如果它是一个变量，我可以导入它，但我在如何导入这些扩展 vee-validate 的规则上画了一个空白。 .

Answer 1

创建一个 vee-validate.js文件:

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

// Install rules
extend("required", required);

在入口文件中导入该文件，通常是 main.js如果您正在使用 vue-cli :

import Vue from 'vue';
import App from './App';
import './vee-validate';

Vue.config.productionTip = false;

new Vue({
  el: '#app',
  render: h => h(App)
});

或者，如果您正在使用 Nuxt.js , 创建 plugins/vee-validate将相同的内容添加到 nuxt.config.js插件数组。