在前端开发中，表单验证是一个非常重要的部分。@ingenious/jquery-validator 是一款基于 jQuery 的表单验证插件，它可以帮助开发者快速搭建表单验证功能，提高开发效率和用户体验。本文将详细介绍该插件的使用方式，并提供示例代码。
安装
@ingenious/jquery-validator 是一个 npm 包，可以通过以下方式安装：
npm install @ingenious/jquery-validator
同时，该插件还依赖 jQuery 库，需要先安装 jQuery：
npm install jquery
使用
引入库文件
安装完成后，在项目中引入库文件：
<!-- 引入 jQuery 库文件 --> <script src="./node_modules/jquery/dist/jquery.min.js"></script> <!-- 引入 @ingenious/jquery-validator 库文件 --> <script src="./node_modules/@ingenious/jquery-validator/dist/jquery.validator.min.js"></script>
基本用法
@ingenious/jquery-validator 支持的表单验证规则较多，下面介绍一个最基本的用法：
-- -------------------- ---- -------
----- -------------
-------------------
------ ----------- --------------- ----------------------
----
------------------
------ --------------- --------------- ----------------------
----
------- -------------------------
-------
--------
-------------------------
-- ------
------ -
--------- -
--------- ---- -- ---- --- ---
-------- --------
-
-
---
---------上述代码中，我们给用户名和密码两个 input 标签设置了 data-rules 属性，值为 required。然后，通过 jQuery 的 validator 函数初始化表单验证，设置验证规则为必填项。当用户提交表单时，如果用户名或密码为空，则会提示“该项不能为空”的错误信息。
更多可选规则
除了 required 规则之外，@ingenious/jquery-validator 还支持以下常见的表单验证规则：
- range：验证数值范围（支持整数和小数）
- email：验证邮箱格式
- url：验证 URL 格式
- date：验证日期格式（支持多种格式）
- pattern：验证正则表达式
更多可用规则请参考官方文档。
自定义规则
有时候，上述内置规则无法满足我们的需求，这时可以自定义表单验证规则。例如，我们需要验证两次密码输入是否一致：
-- -------------------- ---- -------
----- -------------
------------------
------ --------------- --------------- ----------------------
----
--------------------
------ --------------- ----------------------- --------------------- ----------------
----
------- -------------------------
-------
--------
-------------------------
-- ------
------ -
--------- -
--------- ---- -- ---- --- ---
-------- --------
--
----------------- -
--------- ---- -- ---- --- ---------------------------
-------- -----------
-
-
---
---------上述代码中，我们在 password-confirm input 中新增了 match-password 规则，用于验证两次密码输入是否一致。需要注意的是，自定义规则的 validate 函数传入的参数是当前 input 中的值，可以根据需求自行使用。
总结
通过学习本文，我们了解了如何使用 npm 包 @ingenious/jquery-validator 快速搭建表单验证功能。该插件支持大量的内置验证规则，同时还可以自定义规则，非常方便快捷。希望本文能对前端开发者提高开发效率和用户体验有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc1967216659e2441b4