介绍
vee-validate 是一个基于 Vue 的轻量级表单验证库，可以帮助我们很方便地处理表单的验证逻辑。它提供了丰富的验证规则、自定义错误消息、异步验证等功能。
安装
使用 npm 安装 vee-validate：
npm install vee-validate@next
基本用法
在需要使用 vee-validate 的组件中引入，并在 setup 函数中通过 useField 获取表单字段的相关信息。示例代码如下：
-- -------------------- ---- -------
----------
----- -------------------------------
-------------------
------ ------------------ --
-------- --------------- -- ------------------ ---------
------------------
------ --------------- ------------------ --
-------- --------------- -- ------------------ ---------
------- -------------------------
-------
-----------
--------
------ - ---------------- -------- - ---- ------
------ - --------- ------- - ---- ---------------
------ ------- -----------------
------- -
----- - ------------ - - ----------
----- - ------ --------- ------------- ------------- - - ---------
-----------
----------------
--
----- - ------ --------- ------------- ------------- - - ---------
-----------
----------------
--
----- ------ - ----------
--------- --------------
--------- --------------
---
----- ----- - -- -- -
-- ------
--
------ -
---------
---------
-------
------------- ------
--
--
---
---------在上述代码中，我们通过 useForm 获取了表单提交的处理函数 handleSubmit，并使用 useField 获取了用户名和密码两个字段的值以及错误信息。然后将这些信息放到一个响应式对象 errors 中，并在模板中展示。
验证规则
vee-validate 提供了丰富的验证规则，包括常见的 required、email、min、max 等。示例代码如下：
-- -------------------- ---- -------
----------
----- -------------------------------
------------------
------ --------------- --
-------- ------------ -- --------------- ---------
------------------
------ ------------- ------------- --
-------- ---------- -- ------------- ---------
------- -------------------------
-------
-----------
--------
------ - ---------------- -------- - ---- ------
------ - --------- ------- - ---- ---------------
------ ------- -----------------
------- -
----- - ------------ - - ----------
----- - ------ ------ ------------- ---------- - - ---------
--------
----------------
--
----- - ------ ---- ------------- -------- - - --------------- ----------
----- ------ - ----------
------ -----------
---- ---------
---
----- ------ - -- -- -
-- ------
--
------ -
------
----
-------
------------- -------
--
--
---
---------在上述代码中，我们使用了 required、email 和 min 规则来验证邮箱和年龄字段的合法性。
自定义错误消息
除了默认的错误消息外，vee-validate 还支持自定义错误消息。我们可以通过 useField 的第三个参数传入一个对象来指定自定义错误消息。示例代码如下：
-- -------------------- ---- -------
----------
----- -------------------------------
-------------------
------ ------------------ --
-------- --------------- -- ------------------ ---------
------- -------------------------
-------
-----------
--------
------ - ---------------- -------- - ---- ------
------ - --------- ------- - ----
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------