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