Vue-dullahan-validation 是一款基于 Vue.js 框架的表单验证插件，它提供了便捷易用的表单验证方法，能够对表单数据进行快速可靠的验证。本文将会介绍 vue-dullahan-validation 的使用教程以及一些实用的示例代码。
安装
Vue-dullahan-validation 可以通过 npm 安装，使用以下命令：
npm install vue-dullahan-validation --save
使用
引入包文件：
import Vue from 'vue'; import VDValidation from 'vue-dullahan-validation'; Vue.use(VDValidation);
API
Vue-dullahan-validation 提供了以下方法：
validate
验证表单项，返回验证结果。validate 接受三个参数：
fieldName，用于验证的字段名称；value，验证的值；validators，一个数组，包含待验证的验证器。
import { validator } from 'vue-dullahan-validation';
validator.validate('name', '小明', [{ required: true, message: '请输入姓名' }]);validate 返回一个对象。
valid属性为一个布尔值，表示该字段是否通过验证；errors属性为一个数组，包含错误信息。
addValidator
添加验证器，添加之后可以通过 validate 方法进行验证。addValidator 接受两个参数：
validatorName，验证器名称；validatorFunc，验证器方法。
import { validator } from 'vue-dullahan-validation';
validator.addValidator('email', value => {
// 针对 value 进行验证
return /^[\w-]+@[\w-]+(\.[\w-]+)+$/.test(value);
});
validator.validate('email', 'example@domain.com', [{ email: true }]);addMessage
添加验证器错误提示信息，用于支持自定义验证器的提示信息。addMessage 接受两个参数：
validatorName，验证器名称；message，对应的错误信息。
import { validator } from 'vue-dullahan-validation';
validator.addMessage('email', '请输入正确格式的邮箱地址');
validator.validate('email', 'example@domain.com', [{ email: true }]);setLanguage
设置错误提示语言，设置后将会影响到所有使用 Vue-dullahan-validation 的组件。
import { validator } from 'vue-dullahan-validation';
validator.setLanguage({ zh: { required: '此项必填' } });
// or
Vue.use(VDValidation, { language: { zh: { required: '此项必填' } } });setCustomConfig
设置自定义配置，比如错误提示信息的容器节点。
import { validator } from 'vue-dullahan-validation';
validator.setCustomConfig({ errorBox: 'error_box' });
// or
Vue.use(VDValidation, { customConfig: { errorBox: 'error_box' } });示例
常规验证
-- -------------------- ---- -------
----------
-----
------ ----------- -------------- --
---- -------------------- ----------- --------
------- ------------- ---------------------------
------
-----------
--------
------ - --------- - ---- --------------------------
------ ------- -
------ -
------ -
----- ---
------- ---
--
--
-------- -
-------- -
----- ------ - -------------------------- ---------- -- --------- ----- -------- ------- ----
---------------- - ------------ - -- - -----------------
--
--
--
---------联动验证
-- -------------------- ---- -------
----------
-----
------ ------------- ------------- --
---- -------------------- ---------- --------
------ ----------- ------------ --
---- -------------------- --------- --------
------- ------------- ---------------------------- ---------------------------
------
-----------
--------
------ - --------- - ---- --------------------------
------ ------- -
------ -
------ -
---- ---
--- ---
------- ---
--
--
--------- -
-- ----------
----------------- -
----- --------- - ------------------------- --------- -- --------- ----- -------- ------- -- - ---- --- -------- ------- -- -- ----
----- -------- - ------------------------ -------- -- --------- ----- -------- -------- -- - --- ----- -------- ---------- ----
--------------- - --------------- - -- - --------------------
-------------- - -------------- - -- - -------------------
------ --------------- -- ---------------
--
--
-------- -
-------- -
-- ----
--
--
--
---------自定义验证器
-- -------------------- ---- ------- ------ - --------- - ---- -------------------------- -- ----- --------------------------- -- ----- -- -- ----------- -- ----------- -- --------- -- ------------------------------------- ------------------------------------ ----- -- - ------ ----------------------------------------------------------------------------------------------- --- ---------------------------------- ------------------------------------- ---- -- ------ ------------------------------ ---------- -- ----------- ---- ----
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005754181e8991b448ea4bb