在前端开发中，用户输入的数据校验是非常重要的。input-verifier 是一个可以帮助我们校验表单输入数据的 npm 包。本文将介绍如何安装和使用该包。
安装
使用 npm 进行安装：
npm install input-verifier --save
使用
在需要校验表单数据的文件中，引入 input-verifier：
import { InputVerifier } from 'input-verifier';InputVerifier 需要传入一个对象来指定需要校验的数据和相应的规则。对象的 key 值为需要校验的数据的 name，value 为该数据的验证规则。
例如，校验一个登录表单中的用户名和密码：
-- -------------------- ---- -------
----- -------- - --- ---------------
--------- -
--------- -----
---------- --
---------- --
--
--------- -
--------- -----
-------- ------------------------------------------
-
---该对象指定了需要校验的数据为 username 和 password，同时给出了它们的验证规则。
验证规则的选项如下：
- required：是否为必填项。
- minLength：最小长度。
- maxLength：最大长度。
- pattern：正则表达式，用于验证数据格式。
- validator：自定义验证函数。
验证规则可以不填，此时 input-verifier 只会对数据是否必填进行校验。
接下来，在表单 submit 的时候调用 InputVerifier 的 verify 方法进行校验。例如，在 React 中：
-- -------------------- ---- -------
-------------- -
----- - --------- -------- - - -----------
----- ------ - ---------------------- --------- -------- ---
-- --------------- -
-- ----
-- ------
- ---- -
-- ----
---------------------------
-
-verify 方法会返回一个结果对象，该对象包含了校验结果和错误消息。如果校验通过，isPass 属性为 true；如果校验失败，isPass 为 false，同时 errors 属性会包含错误消息，其格式为一个 key-value 对象，key 为数据的 name，value 为错误消息。
示例代码
以下是一个完整的登录表单的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------- - ---- -----------------
----- --------- ------- --------------- -
------------------ -
-------------
---------- - -
--------- ---
--------- --
--
------------- - --- ---------------
--------- -
--------- -----
---------- --
---------- --
--
--------- -
--------- -----
-------- ------------------------------------------
-
---
----------------- - -----------------------------
----------------- - -----------------------------
-
------------------- -
--------------- -------------------- ------------------ ---
-
------------------- -
-----------------------
----- - --------- -------- - - -----------
----- ------ - ---------------------- --------- -------- ---
-- --------------- -
-- ----
-- ------
-------------------- ------------
- ---- -
-- ----
-------------------- ---------------
-
-
-------- -
------ -
----- -----------------------------
-----
-------
----
------ ----------- --------------- --------------------------- ---------------------------- --
--------
------
-----
-------
---
------ --------------- --------------- --------------------------- ---------------------------- --
--------
------
-----
------- -------------------------
------
-------
--
-
-
------ ------- ----------总结
input-verifier 是一个很实用的 npm 包，可以帮助我们校验表单数据的合法性，降低数据格式错误的概率，提升用户体验。而且使用也很简单，只需要指定数据的校验规则，调用 verify 方法即可。希望本文能对大家在前端开发中实现数据校验有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005533881e8991b448d07cc