在前端开发中，表单验证是一个非常常见的需求。验证表单数据的合法性可以在客户端上减轻服务器的负担，提高用户的使用体验。在这个过程中，我们可能需要使用到一些开源的验证库，本篇文章将介绍使用 npm 包 easy-validate-form 进行表单验证的方法。
什么是 easy-validate-form
Easy-validate-form 是一个基于 jQuery 的表单验证插件，它支持多种复杂的验证规则，例如 email、手机号、区号+电话号码、Url、日期、密码、身份证等等，并提供了灵活的配置，可以用于各种需求。
安装和依赖
在使用 easy-validate-form 之前，需要安装和引入 jQuery 和 easy-validate-form。
安装：
npm install jquery easy-validate-form
引入：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="node_modules/easy-validate-form/jquery.easy-validate-form.min.js"></script>
使用方法
HTML 结构
首先需要按照官方文档提供的要求，构建好符合规则的 HTML 结构。例如：
-- -------------------- ---- -------
----- ------------
---- -------------------
------ -------------------------
------ ------------ ------------ ---------- -------------------- ----------------------
------
---- -------------------
------ -------------------------
------ --------------- --------------- ------------- -------------------- --------------------
------
------- ------------- ---------- ------------------------
-------JavaScript 代码
在 HTML 文件中引入 jQuery 和 easy-validate-form 库之后，需要编写 JavaScript 代码进行初始化和配置。
-- -------------------- ---- -------
-------------------------------
------ ------ -- -------- -----
------ -
-- ----
------ -
--------- ----- -- --
------ ---- -- ------
--
--------- -
--------- ----- -- --
---------- -- -- ----- -
---------- -- -- ----- --
-
--
--------- -
-- ------
------ -
--------- ---------- -- ------
------ -------------- -- --------
--
--------- -
--------- --------
---------- --------- --- ---- -- ---- --- ------
---------- --------- --- --- -- ---- --- ------
-
-
---以上代码中，rules 对象包含了所需要的验证规则，messages 对象包含了各种提示信息。每个验证规则和提示信息都有相应的配置项，更详细的信息可以参考官方文档。
验证结果
在提交表单之后，easy-validate-form 会根据配置选项自动进行表单验证，验证结果可以通过注入结果对象进行获取。
$('#myForm').easyValidateForm({
// 其他配置
callback: function (result) {
console.log(result); // result.code 表示验证结果，result.msg 表示详细提示信息
}
});此时，result.code 的值为 0 表示验证通过，值为 1 表示验证不通过。result.msg 为一个数组，包含了验证结果的详细提示信息。
示例代码
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------------------- ------------
------- -----------------------------------------------------------
------- --------------------------------------------------------------------------------
-------
----------- -
-------------- -----
-
----- -
-------- ------
-------------- ----
------------ -----
-
-------------------
--------------------
---------------------- -
-------- ------
------ -----
-------- ------
------- --- ----- -----
-------------- ------
----------- ------------ ---- ------------ ---------- ---- ------------
-
----------- -
-------- -----
------------- --------
----------- - - - ----- --------------------
-
------ -
------ ----
---------- -----
----------- ----
-
-------- -
------ ------
---------- -----
----------- ----
-
--------
-------
------
---------------------- ---------
----- ------------
---- -------------------
------ -------------------------
------ ------------ ------------ ---------- -------------------- ----------------------
---- --------------- --------------------
------
---- -------------------
------ -------------------------
------ --------------- --------------- ------------- -------------------- --------------------
---- ------------------ --------------------
------
------- ------------- ---------- ------------------------
-------
--------
---------- -- -
-------------------------------
------ -
------ -
--------- -----
------ ----
--
--------- -
--------- -----
---------- --
---------- --
-
--
--------- -
------ -
--------- ----------
------ --------------
--
--------- -
--------- --------
---------- --------- --- ----
---------- --------- --- ---
-
--
--------- -------- -------- -
-- ------------- -
------------------ -------- ------- ---- -
----- - ----- - ----------------------
---
- ---- -
------------------------- -----------------------------
-
-
---
---
---------
-------
-------以上代码，通过 $.each 遍历验证结果中的提示信息，并将它们填充到对应的 DOM 元素中。当验证通过时，向表单添加一个“验证通过”的提示信息。
结论
easy-validate-form 是一个轻量简洁的表单验证插件，它能够处理多种复杂的验证规则，并提供了灵活的配置。通过这篇文章的学习，相信读者已经能够熟练地使用 easy-validate-form 进行表单验证了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d430d0927023822a48