在前端开发中，我们经常需要对用户提交的表单数据进行校验。而且，随着表单的复杂，校验规则也会变得越来越复杂。此时，我们可以借助一些优秀的校验库来简化我们的开发工作。其中，npm 包 convalid 是一款非常不错的校验库，它可以帮助我们快速地实现表单数据的校验。本文将介绍如何使用 convalid，并提供详细的教程和示例代码。
安装 convalid
首先，我们需要安装 convalid。可以使用 npm 进行安装。在命令行中输入以下命令：
--- ------- ------ --------
使用 convalid
在安装完 convalid 后，我们可以开始使用它了。下面是一些基本的用法：
定义校验规则
在使用 convalid 进行表单校验之前，我们需要先定义校验规则。在 convalid 中，可以通过对象字面量的方式定义校验规则。具体格式如下：
-
------ -
------ --------
------ --------
---
--
---
-其中，表单字段名是需要校验的表单字段的名称，校验规则是要应用的校验规则名称（convalid 中内置了很多常见的校验规则，详见文末“常见校验规则”部分），校验规则参数是要传递给校验规则的参数。
看一个简单的示例，假设我们要校验一个表单，包含姓名和年龄两个字段。我们可以以以下方式定义规则：
----- ----- - -
----- -
--------- -----
------- - -------- - -
--
---- -
------------- - ------------ ----- --------------------- - -
-
--上述代码中，我们定义了两个规则：对于姓名字段，要求其非空且长度不少于 2；对于年龄字段，要求其为正整数且不少于 1。
进行校验
定义好校验规则后，我们可以使用 convalid 的 validate 函数进行校验。该函数的用法如下：
------ - -------- - ---- -----------
-- ----
----- -------- - -
----- ------
---- --
--
-- ----
----- ----- - -
----- -
--------- -----
------- - -------- - -
--
---- -
------------- - ------------ ----- --------------------- - -
-
--
-- ----
----- ------ - ------------------ -------
-- -------- -
-- ----------- -----------------
----------------------
- ---- -
-- ----
----------------------- ---------
-上述代码中，我们首先定义了一个表单数据对象 formData 和一个校验规则对象 rules。然后，我们使用 validate 函数进行校验。如果校验成功，函数返回 null；否则，返回一个对象，包含校验失败的详细信息。
自定义校验规则
除了使用 convalid 内置的校验规则外，我们还可以自定义校验规则。可以通过 convalid.addValidator 函数添加自定义的校验规则。函数的用法如下：
------ - ------------ - ---- ----------- ---------------------------- ------- -------- -- - -- ----------- -- ------------- -- --------- ---- ---
上述代码中，我们使用 addValidator 函数添加了一个名为 myCustomRule 的校验规则。该校验规则需要传递 value 和 options 两个参数。其中 value 表示需要校验的值，options 表示自定义规则的参数。校验规则的编写方式与 convalid 内置的校验规则类似。
完整示例代码
下面的示例展示了如何使用 convalid 进行表单校验。
------ - --------- ------------ - ---- -----------
-- ----------
-------------------------- ------- -- -
------ ----- - - --- - - ---- - ----- -- -- ---- --------
---
-- ------
----- ----- - -
----- -
--------- -----
------- - -------- - -
--
---- -
------------- - ------------ ----- --------------------- - -
--
------ -
--------- -----
------ ----
--
--------- -
--------- -----
------- - -------- - -
--
---------------- -
--------- ----------
--
------- -
---------- -------- ---------
--
------------ -
--------- -----
------- - -------- ------------- -
--
-------- -
----------- ----
-
--
-- ----
----- -------- - -
----- ------
---- ---
------ ------------------
--------- ---------
---------------- ---------
------- -------
------------ --------------
-------- --
--
----- ------ - ------------------ -------
-- -------- -
----------------------
- ---- -
----------------------- ---------
-在上面的代码中，我们使用了 convalid 内置的校验规则，也添加了一个自定义的校验规则 evenNumber。表单数据包括姓名、年龄、email、密码、确认密码、性别、手机号和一个偶数字段。运行结果如下：
- ---------------- ---------- ------- ----- -------- -------------- -
由于确认密码与密码不一致，因此校验失败，输出了错误信息。
常见校验规则
在 convalid 中，包含了很多常见的校验规则，在此简单列举一些：
- presence：值必须存在
- length：长度必须在指定范围内
- numericality：值必须是数字
- inclusion：值必须在指定的可选项中
- format：值必须符合指定的正则表达式
- email：值必须是合法的邮箱地址
- url：值必须是合法的 URL
- date：值必须是合法的日期
- equality：值必须与另一个字段相等
完整的校验规则列表可以参考 convalid 的文档。
总结
本文介绍了如何使用 npm 包 convalid 进行表单校验，并提供了详细的示例代码。convalid 内置了很多常见的校验规则，同时也支持自定义校验规则，可以帮助我们快速地实现表单数据的校验。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005515581e8991b448ce6cd