前言
在前端开发中，我们常常需要在表单中进行输入校验，以保证客户端提交的数据符合规则。joi-picker 就是一个在前端进行数据校验的 npm 包。它基于 joi，提供了更简洁、易用的 API，可以快速实现表单输入校验。
安装
使用 npm 进行安装：
npm install joi-picker
使用方法
首先，我们需要引入 joi-picker：
import joi from 'joi'; import JoiPicker from 'joi-picker';
接下来，我们需要定义 joi 的规则：
-- -------------------- ---- -------
----- ------ - -------------------
----- ---
---------
---------------
-------
--------
-----------
-------------
---- ---
---------
----------
-------
---------
-----------
------------
---在定义好规则之后，我们就可以使用 joi-picker 进行表单输入校验了：
-- -------------------- ---- -------
----- ------ - --- ------------------
----------------
-
----- -----
---- --
--
------- ------- -- -
-- ------- -
-------------------
- ---- -
--------------------
-
-
--在上面的代码中，我们首先创建了一个 JoiPicker 实例，并将定义好的 schema 作为参数传入。validate 方法用于验证表单输入是否符合 schema 的规则。
API
new JoiPicker(schema)
用于创建一个 joi-picker 实例。
picker.validate(data, callback)
用于验证表单输入是否符合 schema 的规则。参数 data 是需要验证的数据，callback 函数返回验证结果。如果验证成功，则 error 为 null，values 为验证后的数据；如果验证失败，则 error 为错误信息对象。
示例
下面是一个简单的表单示例：
-- -------------------- ---- -------
------ --- ---- ------
------ --------- ---- -------------
----- ------ - -------------------
----- ---
---------
---------------
-------
--------
-----------
-------------
---- ---
---------
----------
-------
---------
-----------
------------
---
----- ------ - --- ------------------
-------- ------------------- -
-----------------------
----- -------- - --- -----------------------
----- ---- - ---
------------------------ ---- -- -
--------- - ------
---
--------------------- ------- ------- -- -
-- ------- -
---------------------
- ---- -
------------------------------
-
---
-
----- ---- - -------------------------------
------------------------------- --------------
----- --------- - --------------------------------
------------------------------ --------
------------------------------------- ------
----- -------- - --------------------------------
----------------------------- -------
------------------------------------ ------
----- ------ - ---------------------------------
--------------------------- ----------
---------------- - -----
----------------------------
---------------------------
-------------------------
--------------------------------在这个示例中，我们创建了一个简单的表单，并在表单提交时使用 joi-picker 进行数据校验。如果数据校验通过，我们会打印出验证后的数据；否则，会弹出错误信息提示框。
总结
joi-picker 是一个非常实用的前端数据校验工具，它基于 joi，提供了更简洁、易用的 API，可以快速实现表单输入校验。在项目开发过程中，我们可以使用 joi-picker 来帮助我们减少数据校验的工作量，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005589d81e8991b448d5e1e