介绍
formystic 是一个快速创建 Web 表单的 npm 包，可以帮助前端开发人员更快地构建表单页，减少样式布局的繁琐过程。formystic 支持多种表单元素，如：input、textarea、select、checkbox、radio等。开发者可以自定义表单元素样式，根据需求灵活添加表单元素，定制化 Web 表单页面。
安装
使用 npm 安装 formystic：
npm install formystic --save
使用
引入
在项目中使用 require 或 import 引入 formystic：
const formystic = require('formystic');
// 或
import formystic from 'formystic';快速创建表单
formystic 快速创建表单方法 createForm 的参数是一个 object，包含多项配置。
示例如下：
-- -------------------- ---- -------
----- ------- - -
--- -------
------- ----
------- -------
------- -
-
------ -----
----- -------
----- -------
------ ---
------------ --------
--
-
------ -----
----- ---------
----- ------
------ ---
------------ --------
--
-
------ -----
----- --------
----- ---------
------ ---
-------- -
----- ----
------- ----
--
--
-
------ -----
----- -----------
----- ----------
------ ---
-------- -
------- -----
-------- -----
------- -----
--
--
-
------ -----
----- ---------
----- -----------
------ ---
-------- -
--- -----
--- -----
--- -----
--
--
-
------ -------
----- -----------
----- --------
------ ---
------------ -----------
--
--
------- -
----- ---------
------ -----
--
--
----- ---- - ------------------------------
--------------------------------如上代码所示，我们定义了一个 options 对象，其中包括了表单 ID，提交地址，提交方式，表单元素等多项配置，这些配置将被传入 createForm 方法，来生成一个表单对象。
自定义样式
createForm 方法返回的是一个表单对象，可以通过 css 样式来自定义表单的外观。
示例如下：
-- -------------------- ---- ------- -- ------- -- ----- - -------- ----- ----------------- -------- ------- --- ----- -------- -------------- ---- - -- --------- -- ------------------- --------------------- ------- -------- - ------ ----- -------- ---- ------- --- ----- ----- -------------- ---- - ------------------- - ------------- ---- - -------------------- - ------ ----- -------- ----- ----------- ----- ---------- ----- ------ ----- ----------------- -------- ------- ----- -------------- ---- -
如上代码所示，我们通过 CSS 自定义了表单元素的外观，使其更加美观。
提交数据
当用户点击表单的提交按钮时，将会向提交地址发送一个 POST 请求，请求数据包含了表单元素的值。为了演示提交效果，我们可以使用一个服务器来接收提交的数据。
示例如下：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ---------- - ----------------------- ----- --- - ---------- ------------------------------- --------- ----- ---- ------------- ----- ---- -- - ---------------------- -- ------ ------------------ --- ---------------- -- -- - ------------------- -- ------- -- ------------------------- ---
如上代码所示，我们使用了 Express.js 框架，并且在服务器上监听了一个路由 /，当客户端提交表单时，服务器将打印出表单数据，并返回给客户端一个提交成功的消息。
完整代码
-- -------------------- ---- -------
--------- -----
------
------
---------------- ------------
-------
-- ------- --
----- -
-------- -----
----------------- --------
------- --- ----- --------
-------------- ----
-
-- --------- --
-------------------
---------------------
-------
-------- -
------ -----
-------- ----
------- --- ----- -----
-------------- ----
-
------------------- -
------------- ----
-
-------------------- -
------ -----
-------- -----
----------- -----
---------- -----
------ -----
----------------- --------
------- -----
-------------- ----
-
--------
-------
------
------- ----------------------------------------------------------
--------
----- --------- - -----------------
----- ------- - -
--- -------
------- ----
------- -------
------- -
-
------ -----
----- -------
----- -------
------ ---
------------ --------
--
-
------ -----
----- ---------
----- ------
------ ---
------------ --------
--
-
------ -----
----- --------
----- ---------
------ ---
-------- -
----- ----
------- ----
--
--
-
------ -----
----- -----------
----- ----------
------ ---
-------- -
------- -----
-------- -----
------- -----
--
--
-
------ -----
----- ---------
----- -----------
------ ---
-------- -
--- -----
--- -----
--- -----
--
--
-
------ -------
----- -----------
----- --------
------ ---
------------ -----------
--
--
------- -
----- ---------
------ -----
--
--
----- ---- - ------------------------------
--------------------------------
---------
--------
----- ---- - --------------------------------
------------------------------- ------- -- -
----------------------- -- --------
----- --- - --- -----------------
--------------------- ------------ ------
------------------------------------ -------------------------------------
---------- - -------- -- -
------------------------
--
------------ ----------------
---
---------
-------
-------结语
通过本篇文章的介绍，我们学习了 npm 包 formystic 的使用方法，能够更快地构建 Web 表单界面，并且可以通过自定义样式使得表单更符合应用的视觉感受。同时，我们还学习了如何通过服务器接收并处理表单提交请求。希望这些知识点能够帮助到大家。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005608e81e8991b448dec20