vee-validate - 如何在外部文件中添加规则答案

【问题标题】：vee-validate - How to add rules in external filevee-validate - 如何在外部文件中添加规则
【发布时间】：2020-07-27 12:01:13
【问题描述】：

我无法在外部文件中添加规则。

如果我使用下面的代码，我得到了这个错误Uncaught ReferenceError: required is not defined

import Vue from 'vue'

import { ValidationObserver, ValidationProvider, extend } from 'vee-validate';
import { required } from 'vee-validate/dist/rules';

extend( 'required', required );

Vue.component( 'ValidationObserver', ValidationObserver );
Vue.component( 'ValidationProvider', ValidationProvider );

当我将代码移动到组件中时，代码开始工作。我做错了什么？

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

extend( 'required', required );

【问题讨论】：

如果将Vue.component 行移到extend 行之前会发生什么？
它不起作用。

标签： vue.js vee-validate

【解决方案1】：

vee-validate 规则是延迟评估的，因此只要 ValidationProvider 尚未因用户交互而调用它，它们就可以随时扩展。

我认为您只是在尝试收拾东西时放错地方了。你可以有一个vee-validate.js 设置文件来添加你所有的规则：

// vee-validate.js
import { extend } from 'vee-validate';
import { required } from 'vee-validate/dist/rules';

extend('required', required);

// other rules ....

然后您可以在您的main.js 中导入 vee-validate 组件并注册它们，但不要忘记导入 vee-validate.js 设置文件：

// main.js
import Vue from 'vue'
import { ValidationObserver, ValidationProvider } from 'vee-validate';
import './vee-validate';

Vue.component('ValidationObserver', ValidationObserver);
Vue.component('ValidationProvider', ValidationProvider);

这应该允许您在组件中的任何位置使用ValidationProvider 和ValidationObserver，并遵循vee-validate.js 中定义的规则

【讨论】：