在前端开发过程中，有很多任务是需要在浏览器中执行的，比如数据校验、表单验证、组件状态管理等。这些任务往往需要用到一些工具库或框架来辅助完成。而在 JavaScript 生态中，有很多开源的工具库和框架，npm 就是其中最常用的工具。
corrieneuch 是一个基于 Promise 的轻量级验证库，它支持常见的验证规则，如 email、url、字符串长度等，并提供了一种简单的方式来自定义验证规则和错误信息。
本篇文章将从以下几个方面介绍 corrieneuch 的使用方法：
- 安装和引入
- 基本用法
- 自定义验证规则和错误信息
- 示例代码
1. 安装和引入
在使用 corrieneuch 之前，我们需要将其安装到项目中。打开终端，进入项目根目录，执行以下命令：
--- ------- ----------- ----------
安装成功后，我们需要在需要使用的文件中引入 corrieneuch：
------ ----------- ---- --------------
2. 基本用法
使用 corrieneuch 的基本方法就是调用其 validate 方法。该方法接受两个参数：需要验证的值和验证规则。如果验证通过，则返回一个空数组，否则返回包含错误信息的数组。
----- ----- - ------------------- ----- ------ - --------------------------- --------- -------------------- -- --
在上述代码中，我们使用 corrieneuch 对一个邮箱地址进行了验证，并保存了返回的错误信息。
3. 自定义验证规则和错误信息
除了支持常见的验证规则外，corrieneuch 还允许我们自定义验证规则和错误信息。
要自定义验证规则，我们需要使用 extend 方法。该方法接受两个参数：自定义规则的名称和一个验证函数。验证函数接受两个参数：需要验证的值和其他参数，如果验证通过，则返回 null；否则返回一个错误信息。下面是一个自定义非负整数规则的例子：
---------------------------------------- ------- ----- -- -
-- ------- ----- --- -------- -- ----- - -- -
------ ---- ----- ---- -- - ------------ ----------
-
------ -----
---在上述例子中，我们定义了一个名为 nonNegativeInteger 的自定义规则，该规则要求输入值必须是一个非负整数。如果验证失败，则返回错误信息。
要自定义错误信息，我们可以在调用 validate 方法时传入第三个参数。该参数包含一个与验证规则名称对应的错误信息。
----- ----- - --- ----- ------ - --------------------------- --------------------- - ------------------- ---- ----- ---- -- - ------------ ---------- --- -------------------- -- - ---- ----- ---- -- - ------------ --------- -
4. 示例代码
以下是一个基于 React 的登录表单的代码示例。该代码包含了使用 corrieneuch 进行验证的部分，以及自定义验证规则和错误信息的部分。
------ ----------- ---- --------------
------ ------ - -------- - ---- --------
----- ----- - -- -- -
----- ------- --------- - -------------
----- ---------- ------------ - -------------
----- ----------- - -- -- -
----- ----------- - --------------------------- ------------------
----- -------------- - ------------------------------ ------------------
-- ------------------- -- ---------------------- -
----------------------- ----------
-------
-
----------------------- ----------
-- -- ----- ------ -----
--
------------------------- ------- ----- -- -
-- ------------- - -------- -
------ ---- ----- ---- -- -- ----- ---------- -------------
-
------ -----
---
------ -
-----
------ ----------- ------------- ------------- -- ------------------------- --
---------------------------- ----------------- -
--------- ------- ----- ---- ----- ----------
------ ------- ----- - ----- ----- ----------
-------------- -- -
---- -------------------------
---
------ --------------- ---------------- ------------- -- ---------------------------- --
------------------------------- ----------------- -
--------- ------- ----- ---- -----------
-------- ---- -------- ---- -- -- ----- - -------------
-------------- -- -
---- -------------------------
---
------- ------------------------------------
------
--
--
------ ------- ------在上述代码中，我们把验证规则和错误信息都写在了 JSX 的表达式中，这样可以直接跟随表单元素进行验证和错误提示。当我们点击登录按钮时，会执行 handleLogin 函数，该函数使用 corrieneuch 对 email 和密码进行验证。如果验证失败，则控制台输出 "Validation failed."，否则输出 "Validation passed."。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055eb081e8991b448dc4cd