在前端开发中，表单校验是一个非常重要的环节。为了方便开发者进行表单校验，npm 社区中有很多优秀的表单校验 npm 包，其中 deep-validation 是一款值得推荐的 npm 包。
deep-validation 是一款基于 JavaScript 的表单校验 npm 包，支持对多种类型的表单元素进行校验，如文本框、下拉框、日期选择器、复选框等。它提供了丰富的校验规则和错误信息，方便开发者进行快速开发和测试。
安装与引入
在使用 deep-validation 之前，我们需要先安装和引入它。
安装
deep-validation npm 包是开源免费的，你可以在 npm 官网上通过下面命令进行安装：
--- ------- --------------- ------
引入
在需要使用 deep-validation 的文件中，引入 npm 包并初始化即可。示例代码如下：
------ -------------- ---- ------------------
----- -------- - --------------------------------------
----- ------------- - -------------------------------------------
--------------------------------------- -- -- -
-- ------------------------------------ -
-------
-
-- ----
---上述代码中主要有两个步骤，第一个步骤是获取表单和提交按钮元素，并通过页面中唯一的 id 进行查询。第二个步骤是使用 deepValidation 对表单进行校验，并在校验通过的情况下进行提交。这里我们只是简单介绍了 deep-validation 的初始化和基本用法，后文将会介绍更细致和实用的内容。
校验规则
在 deep-validation 中，我们可以通过传入不同的校验规则来对表单元素进行校验。目前它支持的校验规则有丰富的内置规则，包括但不限于 required、email、url、mobile、number、range、equal 等。
此外，我们还可以自定义校验规则。
自定义校验规则
在 deep-validation 中，我们可以通过 addRule 方法来自定义校验规则。示例代码如下：
-------------------------------- ------- ------- -- -
----- ------ - --------------
------ ------------ --- -------
---
-- -------------
----------------------
-------- -----------------------------------------
------ -
-
----- ---------
------- -------- ---
-------- --------- ---
--
--
----上述代码定义了一类名为 custom 的自定义校验规则，该规则的校验需要传入一个参数 length，并要求校验的输入值的长度与 length 参数相等。
通过添加 custom 校验规则，我们需要在表单元素的 rules 属性中使用 name 指定该规则的名字，并通过 params 传入一个长度为 3 的参数。如果用户输入的长度正好为 3，那么校验器将不会提示用户错误信息；否则，将会向用户展示 message 中的提示信息。
校验器转换器
有时我们需要对某一类型的表单元素与某一类校验规则进行快速处理，为了方便实现，deep-validation 还提供了校验器转换器。
以常见的手机号码输入框为例，我们需要使用两个内置校验规则 required 和 mobile，并且在输入时需要自动将用户输入的内容格式化为 XXX XXXX XXXX 的形式。示例代码如下：
---------------------------------- -------- --------- -
-- ----------------------------- --- ------ -
--------------------------------- ----
--------------------------------- -- -- -
--- --- - ---------------------- ----
----- ----- - --------------------------
----- ----- - ----------------
--- - ----- - -------- - - - - -------- - - - - -------- - ----
------------- - ----
---
------ -
-
----- -----------
-------- -----------
--
-
----- ---------
-------- ----------
--
--
-
------ -----
---
--------------------
------------------------------------------ -- -
----- ----- - ---------------------------------------- ------
------ --------- ------------- -------
--
--在上述代码中，首先我们通过 setConvertor 方法定义了一个名为 tel 的校验器转换器，它的作用是将 type 为 tel 的输入框转换成混有格式的手机号码输入框，同时为该输入框填充了两种校验规则。在计算校验规则的函数中，我们使用了一些字符串截取和转换的技巧来将用户输入的手机号码格式化。最后，我们使用了 convertSpecToRules 方法通过 tel 转换器，将计算出来的校验规则应用到输入框中，实现快速的校验与格式化。
结语
deep-validation 在表单校验中提供了非常开放、灵活的解决方案，并使用了简洁的 API，让开发者可以更加专注于业务逻辑的实现。在这篇文章中，我们简单介绍了 deep-validation 的安装、初始化、校验规则与校验器转换器等知识点。希望这篇文章能对你学习使用 npm 包 deep-validation 有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64792