在前端开发中，表单验证是一个重要的步骤。而 jquery.bootstrapvalidator 是基于 jQuery 的表单验证插件，它可以方便快捷地进行表单验证操作。本文将为您介绍如何使用 jquery.bootstrapvalidator 实现表单验证。
安装和引入
首先，我们需要安装 jquery.bootstrapvalidator。通过 npm 进行安装：
npm install jquery.bootstrapvalidator
然后，在 HTML 文件中引入 jquery.bootstrapvalidator 和其依赖的库：
<!-- 引入 jQuery --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- 引入 bootstrap-validator --> <script src="node_modules/jquery.bootstrapvalidator/dist/js/bootstrapValidator.min.js"></script> <!-- 引入 bootstrap-validator 的样式文件 --> <link rel="stylesheet" href="node_modules/jquery.bootstrapvalidator/dist/css/bootstrapValidator.min.css">
基本用法
接下来，我们来实现一个简单的表单验证。假设我们有如下的 HTML 表单：
-- -------------------- ---- -------
----- ------------
---- -------------------
-------------------
------ ----------- --------------- -------------------- --
------
---- -------------------
------------------
------ --------------- --------------- -------------------- --
------
------- ------------- ---------- ------------------------
-------我们需要验证用户名和密码是否为空。可以通过以下代码实现：
-- -------------------- ---- -------
---------------------------------
------- -
--------- -
----------- -
--------- -
-------- ---------
-
-
--
--------- -
----------- -
--------- -
-------- --------
-
-
-
-
---这里我们通过 jQuery 选择器选中表单元素，并调用 bootstrapValidator 方法进行初始化。在 fields 属性中指定了需要验证的字段和对应的验证规则。
更多验证规则
除了上面的 notEmpty 规则，jquery.bootstrapvalidator 还提供了许多其他的验证规则，例如：
emailAddress：验证邮件地址格式；stringLength：验证字符串长度；regexp：使用正则表达式进行验证；remote：异步验证，向服务器发送请求检查输入值是否存在。
具体用法请参考官方文档。
自定义错误信息
默认情况下，jquery.bootstrapvalidator 提供了一些默认的错误信息。如果您希望自定义错误信息，可以在 validators 中指定 message 属性，例如：
-- -------------------- ---- -------
--------- -
----------- -
--------- -
-------- ---------
--
------------- -
---- --
---- ---
-------- ----------------
-
-
-实时验证
还可以开启实时验证功能，即用户输入时立即进行验证。可以通过以下代码实现：
$("#myForm").bootstrapValidator({
live: 'enabled',
fields: {
// ...
}
});示例代码
最后，我们来看一个完整的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------------------- ----------
---- -- ------ ---
------- -----------------------------------------------------------
---- -- ------------------- ---
------- ----------------------------------------------------------------------------------------
---- -- ------------------- ----- ---
----- ---------------- ----------------------------------------------------------------------------------
--------
---------------------------- -
---------------------------------
----- ----------
------- -
--------- -
----------- -
--------- -
-------- ---------
--
------------- -
---- --
---
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------