前言
在前端开发中，数据校验是非常重要的一项工作，它能够帮助我们保证数据的正确性，避免用户输入错误数据带来的问题。而 vusion-async-validator 就是一个非常方便的 npm 包，可以帮助我们完成对数据的校验工作。
简介
vusion-async-validator 是一个基于异步的前端验证库，它可以用于验证表单、模型等数据，并且支持自定义验证规则和错误信息。
安装
首先要确保你已安装了 node 和 npm，然后可以使用以下命令来安装 vusion-async-validator：
npm install vusion-async-validator --save
使用
创建验证器
我们可以使用 vusion-async-validator 的 createValidator 函数来创建一个验证器，该函数接受一个对象作为参数，以定义验证器的规则。
-- -------------------- ---- -------
------ - --------------- - ---- ------------------------
----- --------- - -----------------
---------- - -- ----
--------- ----- -- ---
----- --------- -- ------
-------- ---------- -- -------
-
--上面的代码定义了一个验证器 validator，用于验证 fieldName 是否为必填项和是否为字符串类型。
校验数据
我们可以使用验证器的 validate 方法来校验数据，该方法接受两个参数：要校验的数据和回调函数。回调函数接收一个数组作为参数，数组中包含了校验失败的信息。如果回调函数被执行，说明数据校验不通过。
-- -------------------- ---- -------
----- ---- - -
---------- --------
-
------------------------ ------ -- -
-- -------- -
---------------------
- ---- -
---------------------
-
--上述代码中，我们用 data 作为要校验的数据，使用 validate 方法来校验数据，并将回调函数作为第二个参数。如果回调函数被执行，说明数据校验不通过，我们可以从第一个参数中获取错误信息。
自定义验证规则
我们可以在验证器中定义自己的验证规则，可以是一个普通函数，也可以是一个异步函数。
-- -------------------- ---- -------
----- --------- - -----------------
---------- - -- ----
--------- ----- -- ---
----- --------- -- ------
-------- ---------- -- -------
--
------ - -- -----
--------------- ------ --------- -
-- -------------------------- -
------------ --------------------
- ---- -
----------
-
-
-
--上述代码中，我们在验证器中定义了一个自定义规则 phone，该规则接收三个参数：验证规则 rule、值 value 和回调函数 callback。如果值不满足规则，我们调用回调函数并传递一个错误对象。
注册验证规则
我们也可以通过 Validator 类的 register 方法来注册全局验证规则。
-- -------------------- ---- -------
------ - --------- - ---- ------------------------
--------------------------- ------ ------ --------- -- -
-- -------------------------- -
------------ --------------------
- ---- -
----------
-
--上述代码中，我们通过 Validator 类的 register 方法注册了一个全局验证规则 phone，该规则与前面的自定义规则 phone 相同。
同步校验
vusion-async-validator 默认是异步校验，但如果你需要同步校验，可以在验证器中添加 async: false 的选项。
-- -------------------- ---- -------
----- --------- - -----------------
---------- - -- ----
--------- ----- -- ---
----- --------- -- ------
-------- ---------- -- -------
--
------ - -- -----
--------------- ------ --------- -
-- -------------------------- -
------------ --------------------
- ---- -
----------
-
--
------ -----
-
--可选校验
默认情况下，vusion-async-validator 会对所有非 undefined 的字段进行校验。如果要忽略某些字段，则可以在验证规则中添加 required: false 的选项。
-- -------------------- ---- -------
----- --------- - -----------------
---------- - -- ----
--------- ----- -- ---
----- --------- -- ------
-------- ---------- -- -------
--
------ - -- -----
--------------- ------ --------- -
-- -------------------------- -
------------ --------------------
- ---- -
----------
-
--
--------- ----- -- ----
-
--指定错误信息
vusion-async-validator 默认会自动生成错误信息，但如果你需要指定自己的错误信息，可以在验证规则中添加 message 选项。
-- -------------------- ---- -------
----- --------- - -----------------
---------- - -- ----
--------- ----- -- ---
----- --------- -- ------
-------- ---------- -- -------
--
------ - -- -----
--------------- ------ --------- -
-- -------------------------- -
------------ ------------------ -- --------------
- ---- -
----------
-
--
-------- ------------
-
--示例代码
-- -------------------- ---- -------
------ - ---------------- --------- - ---- ------------------------
--------------------------- ------ ------ --------- -- -
-- -------------------------- -
------------ -------------------
- ---- -
----------
-
--
----- --------- - -----------------
----- -
--------- -----
-------- -------
--
---- -
----- ---------
--------------- ------ --------- -
-- ------ - -- -- ----- - --- -
------------ ------------ -- - -- ------
- ---- -
----------
-
-
--
------ -
--------- -----
---------- -------
-
--
----- ---- - -
----- -----
---- ---
------ -------------
-
------------------------ ------ -- -
-- -------- -
---------------------
- ---- -
---------------------
-
--总结
vusion-async-validator 是一个非常方便的 npm 包，可以帮助我们完成对数据的校验工作。通过本文的学习，相信你已经可以熟练使用 vusion-async-validator 完成数据校验并自定义验证规则了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600571c581e8991b448e837c