简介
apostrophe-forms 是一款基于 Node.js 平台和 express 框架的 npm 包，是一个灵活的表单生成工具。它提供了基础的表单元素、验证器和邮件通知功能，可以用于快捷地生成一个完整的表单网页。apostrophe-forms 采用了 apostropheCMS 的设计框架，如果你已经熟悉了这个框架，那么直接上手 apostrophe-forms 就非常容易了。
这篇文章将介绍如何使用 apostrophe-forms 生成一个简单的反馈表单，包括如何添加自定义表单元素、验证器和邮件通知等功能。还将介绍如何使用 apostrophe-forms 的模板扩展功能，自定义表单网页的外观。
安装
1. 创建项目
首先，我们需要创建一个新的 Node.js 项目。在命令行中输入以下命令：
mkdir my-forms-app && cd my-forms-app npm init
按照提示一步步填写项目信息，然后在目录下创建 app.js 文件，作为项目的入口文件。
2. 安装 npm 包
在 my-forms-app 目录中，输入以下命令安装 apostrophe-forms 包：
npm install apostrophe-forms
这会在 node_modules 目录中安装 apostrophe-forms 包及其依赖项。
快速上手
1. 基本使用
首先，在 app.js 中引入 apostrophe-forms：
const forms = require('apostrophe-forms');接下来，创建一个 express 应用程序对象 app：
const express = require('express');
const app = express();然后，在应用程序对象中注册 apostrophe-forms：
app.use('/feedback', forms());这里的路由地址是 /feedback，表示我们将在 http://localhost:3000/feedback 下创建一个反馈表单。
最后，启动 express 应用程序：
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`Server running on port ${PORT}`);
});现在可以通过访问 http://localhost:3000/feedback 来查看表单了。
2. 添加表单元素
接下来我们给表单添加一些基础的表单元素，比如说输入框、选择框和提交按钮。在 app.js 中添加以下代码：
-- -------------------- ---- -------
----- ---- - -
----- -----------
------ ---------
------- -
-
----- -------
------ -------
----- -------
--------- -----
--
-
----- --------
------ -------
----- --------
--------- -----
--
-
----- -------
------ -------
----- ---------
-------- -
- ------ ----- ------ -------- --
- ------ ----- ------ --------- --
- ------ ----- ------ ------- --
--
--
-
----- ----------
------ -------
----- -----------
--------- -----
--
-
----- ---------
------ -----
----- ---------
--
--
--这里创建了一个名为 feedback 的表单，包含了姓名、邮箱、反馈类型、反馈内容和提交按钮五个表单元素。
现在我们需要将这个表单添加到应用程序中，并将路由地址与其相关联。在 app.js 中添加以下代码：
-- -------------------- ---- ------- ----- ----- - ---------------------------- ----- ------- - ------------------- ----- --- - ---------- ----- ---- - - -- --- --------- --- -- -------------------- ------- ------ ------ ---- ----- ---- - ---------------- -- ----- ---------------- -- -- - ------------------- ------- -- ---- ---------- ---
现在我们可以通过访问 http://localhost:3000/feedback 来查看包含表单元素的反馈表单。
3. 自定义表单元素
如果表单元素在 apostrophe-forms 提供的基础元素中找不到，可以通过自定义表单元素来满足特定需求。
首先，需要定义一个自定义表单元素的处理函数，其实现需要满足以下两个要求：
- 以
function(req, data)的形式定义，其中req是 express 请求对象，data是当前表单数据对象； - 返回一个 HTML 字符串，代表自定义表单元素的 HTML 表示。
这里定义了一个自定义表单元素 captcha，它是一个验证码输入框。它通过 svg-captcha 模块生成一个 SVG 格式的验证码图片，并将其嵌入到 HTML 中。
-- -------------------- ---- -------
----- ---------- - -----------------------
-------- ----------------- -
----- ------- - ------------------- ----- -- ------ -- ------ ---- ---
------ -
---- -------------------
------ -------------------------------------
------ ----------- -------------------- ------------ -------------- ---------
------
------ ------------- ---------------- ----------------------
--
-
----- ---- - -
-- --- --------- ---
------- -
-- --- ------ ---
-
----- ----------
------ ---
----- ----------
------- ----------------
--
-- --- ------ ---
--
--这里使用了 render 字段来指定自定义表单元素的处理函数，而不是使用 type 字段。
配置验证器
接下来，我们需要添加验证器，确保表单数据的合法性。例如，邮箱格式要符合标准格式，反馈内容要不少于 10 个字符。
在 app.js 中添加以下代码：
-- -------------------- ---- -------
----- --------- - -
------ -
-
----- ----------
-------- -------------
--
--
-------- -
-
----- -----------
-------- - ---- -- --
-------- --------- -- -----
--
--
--
----- ---- - -
-- --- --------- ---
----------
--这里定义了两个验证器，针对 email 和 message 两个表单元素。
apostrophe-forms 内置了多个验证器，包括 isEmail、isURL、isNumeric、isInt、isLength、isLowerCase、isUpperCase、isAlpha、isAlphanumeric、isCreditCard 等。如果需要实现特定的验证器，可以使用回调函数自定义验证逻辑，例如：
-- -------------------- ---- -------
----- --------- - -
-------- -
-
-------- --------
--------- ------- ----- -- -
------ ----- --- -----------------------------------------------
--
--
--
--这里定义了一个名为 captcha 的自定义验证器，其回调函数判断验证码是否正确。
添加邮件通知
表单提交后，我们需要将提交的表单数据发送到指定的邮箱地址，由管理员处理。在 apostrophe-forms 中可以通过配置邮件通知实现这一功能。
首先，我们需要安装 nodemailer 和 nodemailer-sendmail-transport 两个 npm 包：
npm install nodemailer nodemailer-sendmail-transport
然后，在 app.js 中添加以下代码：
-- -------------------- ---- -------
----- --------- - -----------------------------------------
----- ---------- - ----------------------
----- -------- - ------ ----- -- -
----- ------- - -
-------- ---- ------------ ---------------
-------- ----- ------------
-------- --------
---------------
--
----- ----------- - -
----- ----------------------
--- --------------------
-------- --------- ---- --------------
----- --------
--
----- ----------- - ----------------------------------------
------ ----------------------------------
--
----- ---- - -
-- --- --------- ---
-------- -
------- --------------------
--------- --------------------
---------------- -----------
--
---------
--这里定义了一个 sendMail 函数，接收 form 和 data 两个参数。sendMail 函数根据 form 中的邮件通知配置，生成发送邮件的 mailOptions 对象，使用 nodemailer 库发送邮件。
配置 apostrophe-forms 使其调用该函数：
app.use('/feedback', forms({ forms: [form] }));现在表单提交后，管理员会收到一封包含表单数据的邮件。
定制模板
最后，我们想给表单美化一下，改变一下默认模板。apostrophe-forms 支持自定义模板，以完全控制表单网页的外观。
创建一个名为 views/form.html 的文件，作为新的表单模板。和默认模板差不多，用 {% block ... %} ... {% endblock %} 指定了不同的块，即表单头、表单元素和表单尾，可以在这里定制各自的样式和结构。
-- -------------------- ---- -------
-- ------- ---------------------------- --
-- ----- -------- --
--- ---------------------- ---------- -------
-- -------- --
-- ----- ---------- --
-- --- ---------- - - ---------- --
-- --- ----- -- ----------- --
-- -- ---------- -- --------- --
-- --- ----------- - ----------------- ----- --
-- ----- --
-- -- ---------- -- --------- --
-- -- ----------- --
-- --- ----- - ----------- --
-- --- ------------ - ------------- --
-- --- ---------- - - ---------- --
-- ----- --
---- ------------------- ---------- ----
-- -- ----------- --
------ ------- ---------- ------ ----------- ---- -- -------------- ------- ------------------------------ ----- ----------
-- ----- --
-- -- ---------- -- ---------- --
--------- -------------------- -------- ---------- --- ------ ---------- --- -------- -- -- -------------- ------------ ----- ----- ----------- -------------
-- ------ ---------- -- -------- --
------- -------------------- -------- ---------- --- ------ ---------- --- -- -- -------------- ------------ ----- ---
-- --- ------ -- ------------- --
------- --------- ------------ --- -- -- ----------- -- ------------ ------------ ----- ---
-- ------------ --
---------
-- ------ --
---------
-- ------ ---------- -- ---------- --
------ -----------------
------ --------------- -------- ---------- --- ------ ---------- --- -- -- ------------- ----------- ----- ----- -- ----------- -- -- ----------- ---- ----- --
--------
-- ------ ---------- -- ------- --
------ ---------------------
------ ------------ -------- ---------- --- ------ ---------- --- -- -- ------------- ----------- ----- -- --------- ----------- ---- -- -- ----------- -- -- ----------- ---- ----- --
--------
-- ---- --
------ -------- ---------- --- -------------------- -------- ---------- --- ------ ---------- --- --------- ----------- - ----------- ----- -- -------------- -- ---------- ----- ---
-- ----- --
-- -- ----- --
----- --------------------- ------------ ---------
-- ----- --
------
-- ----- --
-- ------ --
-- ----------- - ----------- --
-- -------- --
-- ----- ---------- --
----
------- ------------- ---------- --------------- --------------------------- -----------
-- -------- --在 app.js 中，通过如下代码将自定义模板配置到 apostrophe-forms 中：
-- -------------------- ---- -------
----- ---- - ----------------
----- ---- - -
-- --- --------- ---
-------- -
-- --- ------------ ---
--------- -------------------- -------- -------------
--
--最后，重新启动应用程序，可以在表单网页上看到美观的反馈表单。
总结
通过本文的介绍，我们了解了使用 apostrophe-forms 生成反馈表单的基本方法，包括如何添加表单元素、验证器、邮件通知和模板定义。此外，我们还介绍了如何使用自定义表单元素、自定义验证器和自定义模板来满足特定需求。希望这篇文章能够帮助你熟悉 apostrophe-forms 的使用方法，灵活地处理各种表单需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/80593