本篇总结 Config
配置
我们可能需要配置一些选项来调整一些插件内部机制。这不是必需的,但可能会导致冲突。例如,在我们的 vue 实例上使用一个名为 errors 的属性可能导致冲突。以下是我们如何设置选项以及这些选项默认值:
import Vue from 'vue';
import VeeValidate from 'vee-validate';
const config = {
aria: true,
classNames: {},
classes: false,
delay: 0,
dictionary: null,
errorBagName: 'errors', // change if property conflicts
events: 'input|blur',
fieldsBagName: 'fields',
i18n: null, // vue-i18n 插件实例
i18nRootKey: 'validations', // the nested key under which the validation messages will be located
inject: true,
locale: 'en',
validity: false
};
Vue.use(VeeValidate, config);
属性 - 类型 - 默认值 - 描述
aria - boolean - true - 允许在 HTML inputs 输入框上设置 aria-invalid 和 aria-required 属性
classNames - object - 空 - 根据 input 输入框的状态应用的 class
classes - boolean - false - 对要验证的 HTML inputs 输入框应用自动类
delay - number - 0 - 所有 inputs 输入框默认的防抖时间(仅影响验证)
dictionary - object|null - null - 一个要与内部字典合并的字典。
errorBagName - string - 'errors' - ErrorBag 对象的名称,会被注入到每个 Vue 实例的 data 里。用于避免与其他插件冲突。
events - string - 'input' - 将要被监听的、用来触发认证的、以 '|' 分隔的默认事件名称列表。如果提供了空字符串,将禁用所有监听器。
fieldsBagName - string - 'fields' - 字段(标志)对象的名称,会被注入到每个 Vue 实例的 data 里。
fastExit - boolean - true - 对每个字段的验证,是否应在首次验证失败后停止,我们可以使用 continues 和 bails 修饰符,选择加入或退出任一设置
i18n - VueI18n|null - null - vue-i18n 实例,如果提供了,将使用 i18n 插件,集成到 vee-validate,并将使用该实例来生成错误消息,而不使用内置字典。
i18nRootKey - string - 'validations' - 每个语言环境的验证消息的 key 名
inject - boolean - true - 指定是否应为所有组件自动注入验证器实例
locale - string - 'en' - 验证消息的默认语言
validaty - boolean - false - 在本地 HTML inputs 输入框上,设置自定义有效性 Constraint Validation(约束验证)
安装
Vue 插件 API
我们可以通过 Vue 的插件 API 来安装 vee-validate
import Vue from 'vue';
import VueValidate from 'vee-validate';
Vue.use(VeeValidate, config);
手动安装
我们可能对使用 VeeValidate 暴露的组件感兴趣,无需安装插件,我们可以通过创建一个 VeeValidate 插件实例来完成此操作。
import Vue from 'vue';
import VueValidate from 'vee-validate';
const vee = new VeeValidate(config, Vue);
使用这种方法,不用给我们的应用程序,添加任何的 directives、mixins 或 components,而是传递 vee-validate 需要设置的所有内容,然后我们将负责手动使用该插件。如果我们只打算使用像 'Validator.verify API' 这样独立的功能,这是非常有用的。
VeeValidate 中文文档-Config
猜你喜欢
转载自blog.csdn.net/beyond__devil/article/details/84956832
今日推荐
周排行