简介
strap-forms 是一个基于 Bootstrap 的开源 npm 包，它提供了一系列的表单组件，可帮助开发者轻松构建漂亮的表单，并完成表单验证、数据处理等操作。strap-forms 具有易用性、定制化程度高等特点，成为前端开发中不可或缺的一门工具。
安装
首先确保已安装 Node.js ，然后可以通过 npm 直接安装 strap-forms：
npm i strap-forms
使用
添加 CSS 和 JS
strap-forms 依赖于 Bootstrap 的 CSS 和 JS 文件，因此我们需要先引入 Bootstrap 的 CSS 和 JS 文件，例如：
<!-- 引入 Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- 引入 Bootstrap JS --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
接下来，在 HTML 文件中引入 strap-forms 的 CSS 和 JS 文件：
<!-- 引入 strap-forms CSS --> <link rel="stylesheet" href="node_modules/strap-forms/dist/strap-forms.min.css"> <!-- 引入 strap-forms JS --> <script src="node_modules/strap-forms/dist/strap-forms.min.js"></script>
构建表单
使用 strap-forms 构建表单非常简单。我们先使用 Bootstrap 的表单组件构建一个表单：
-- -------------------- ---- -------
------
---- -------------------
------ ---------------------
------ ----------- -------------------- --------- ------------
------
---- -------------------
------ ----------------------
------ ------------ -------------------- ---------- -------------
------
------- ------------- ---------- ------------------------
-------接下来，我们通过 JS 代码将表单转换为 strap-forms 表单：
-- -------------------- ---- -------
----- ----------
---- -------------------
------ ---------------------
------ ----------- -------------------- --------- ------------
------
---- -------------------
------ ----------------------
------ ------------ -------------------- ---------- -------------
------
------- ------------- ---------- ------------------------
-------
--------
------------ -
------------------------
---
---------这样，我们就成功地将表单转换为 strap-forms 表单了。
表单验证
strap-forms 内置了丰富的验证规则，如必填字段、最小长度、最大长度、邮箱格式、手机号格式等等。我们可以通过在 HTML 元素中添加 data-rule-* 的方式来指定验证规则。
例如，我们可以在输入框中添加 data-rule-required 来表示该输入框为必填字段：
-- -------------------- ---- -------
----- ----------
---- -------------------
------ ---------------------
------ ----------- -------------------- --------- ----------- -------------------
------
---- -------------------
------ ----------------------
------ ------------ -------------------- ---------- ------------ ----------------
------
------- ------------- ---------- ------------------------
-------
--------
------------ -
------------------------
---
---------在用户提交表单时，strap-forms 会自动进行验证，并在验证失败时提示用户错误信息。
自定义验证规则
如果 strap-forms 内置的验证规则不能满足我们的需求，我们还可以通过编写自定义验证规则的方式来进行验证。
首先，我们需要编写一个验证函数：
function validatePhone(value) {
return /^1[3-9]\d{9}$/.test(value);
}该函数将一个值作为参数，返回 true/false 来表示是否通过验证。
接下来，我们可以使用 strap-forms 的 addValidator 方法来添加验证规则：
$.strapForms.addValidator("phone", validatePhone, "请输入正确的手机号码");
这里的 addValidator 方法接受三个参数：验证规则名称、验证函数和错误提示信息。
最后，我们可以在 HTML 元素中使用 data-rule-phone 来指定使用我们自定义的验证规则：
-- -------------------- ---- -------
----- ----------
---- -------------------
------ ------------------------
------ ----------- -------------------- ---------- ------------ ----------------
------
------- ------------- ---------- ------------------------
-------
--------
------------ -
---------------------------------- -------------- --------------
------------------------
---
---------数据处理
strap-forms 内置了 submitHandler 和 successHandler 两个回调函数，分别用于表单提交和表单提交成功后的处理。
例如，我们可以在表单成功提交后提示用户：
-- -------------------- ---- -------
----- ----------
---- -------------------
------ ---------------------
------ ----------- -------------------- --------- ----------- -------------------
------
---- -------------------
------ ----------------------
------ ------------ -------------------- ---------- ------------ ----------------
------
------- ------------- ---------- ------------------------
-------
--------
------------ -
-----------------------
--------------- -------------- -
--------------
-
---
---
---------在这个例子中，我们定义了 successHandler 回调函数，用于在表单提交成功后弹出提示框。
总结
strap-forms 是一个优秀的 npm 包，提供了丰富的表单组件和验证规则，并支持自定义和数据处理等高级功能。使用 strap-forms 可以大大提高开发效率，同时提升应用程序的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600571d481e8991b448e83c2