在前端开发中，表单是不可避免的一部分。开发人员需要考虑许多因素，例如表单的设计和验证。为了更好地管理表单，我们可以使用 NPM 的 nannar-form-making 包。该包提供了易于使用和灵活的表单制作解决方案，使开发人员可以轻松创建表单。
安装
使用 npm 来安装 nannar-form-making 包。
npm install nannar-form-making --save
使用
引入
您可以使用以下方式来引入 nannar-form-making 包。
import NannarFormMaking from 'nannar-form-making'
或者，您可以将它添加到 window：
<script src="node_modules/nannar-form-making/dist/nannar-form-making.min.js"></script>
创建表单
要创建一个表单，您需要实例化 NannarFormMaking 类并传入一个包含表单定义的对象。该对象应该包含输入字段的类型、ID、标签和验证规则。例如：
-- -------------------- ---- -------
----- -------------- - -
--- ----------
------- -
-
----- -------
--- -------
------ -------
------ ------------ -------- ---------
--
-
----- --------
--- --------
------ --------
------ ------------ --------
-
-
--
----- ---- - --- ---------------------------------现在，您可以将该表单添加到文档中：
form.appendTo(document.body);
处理表单
当用户提交表单时，您需要处理表单数据。要获取表单数据，请使用以下方法：
form.getData();
验证规则
nannar-form-making 包内置了几种常见的验证规则，您也可以自定义验证规则。以下是一些常用的验证规则：
- required: 字段不能为空。
- min:X: 字段的值必须大于或等于 X。
- max:X: 字段的值必须小于或等于 X。
- email: 字段必须是有效的电子邮件地址。
你可以使用以下代码来自定义验证规则：
form.addRule('my-rule', value => {
return value === 'my-value';
});您可以使用以下代码来向特定字段添加验证规则：
const field = form.getField('my-field');
field.addRule('my-rule');示例
下面是在网页上演示使用 nannar-form-making 的例子。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------------- ------------
-------
----- -
-------- ------
-------------- ----
---------- -----
-
-------------------
--------------------
------ -
------- -----
-------------- ----
------- --- ----- -----
------ -----
---------- -----
-------- --- ----
-
-------------------- -
------- -----
-------------- ----
------- -----
------ ------
----------------- --------
---------- -----
-------- --- -----
------- --------
-
--------
-------
------
-------------------- ---------
---- ----------------
------- ------------------------------------------------------------------------------
--------
----- -------------- - -
--- ----------
------- -
-
----- -------
--- -------
------ -------
------ ------------ -------- ---------
--
-
----- --------
--- --------
------ --------
------ ------------ --------
-
-
--
----- ---- - --- ---------------------------------
-----------------------------------------------
------------------- -- -
-----------------------
-- ----------------- -
----- ---- - ---------------
------------------
----------- --------- ----------------
-
---
---------
-------
-------结论
nannar-form-making 包是一个非常方便的包，它可以大大地减少开发人员创建表单的时间，并可以轻松添加验证规则。它也可以用作学习表单组成和使用的指南，给出了许多示例代码，使使用更加容易。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672ea0520b171f02e1e32