介绍
在前端开发中，表单通常是必不可少的一部分，但表单的样式和结构都比较琐碎，我们很难把他们统一起来。这时，@blinkmobile/forms-template-helper 这个 npm 包就能派上用场了。
@blinkmobile/forms-template-helper 是一个表单模板辅助工具，能够自动化生成表单模板，让表单统一规范且可以自定义。
安装
使用 npm 安装:
npm install @blinkmobile/forms-template-helper
使用
下面我们来看一个简单的示例：
-- -------------------- ---- -------
------ ------------ ---- -------------------------------------
--- ------ - -
----- ---------
----------- -
----- -
----- ---------
------ -------
-------- ------ -------
--
---- -
----- ---------
------ ------
-------- --
-
-
--
--- -------- - -
----------------- ---------
----- ------------- --------
---- ------------- ---------
-
--- -------- - ---
------------------ --------- ----------上面的代码中，我们使用 createForm 函数创建了一个表单，并传入了一个 JSON Schema 和一个 UI Schema。JSON Schema 定义了表单中的字段，而 UI Schema 决定了表单中的字段类型。
当我们调用 createForm 函数时，会自动创建表单，该表单包含了由 schema 和 uiSchema 定义的所有字段。
进阶用法
除了基本用法外，@blinkmobile/forms-template-helper 还提供了许多高级用法。下面介绍一些常用的用法：
自定义表单样式
若想自定义表单样式，可以使用样式类，如：
let uiSchema = {
'ui:rootFieldId': 'myForm',
name: {'ui:widget': 'text', 'ui:classNames': 'form-control'},
age: {'ui:widget': 'number', 'ui:classNames': 'form-control'}
}自定义表单验证规则
若想自定义表单验证规则，可以使用 validate 函数，如：
-- -------------------- ---- -------
------ ---------- ---- -------------------------------------
--- ------ - -
----- ---------
----------- -
----- -
----- ---------
------ -------
-------- ------ -------
--
---- -
----- ---------
------ ------
-------- --
-
-
--
--- -------- - -
----------------- ---------
----- ------------- --------
---- ------------- ---------
--
--- -------- - ---
--- ------ - ---------------- --------- ----------
-------------------- -- ---------结语
@blinkmobile/forms-template-helper 是一个十分方便的表单模板辅助工具，它能够快速创建表单、自定义表单样式和验证规则。希望我的文章对你有所帮助，祝你在前端开发中取得更好的成绩！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668f8d9381d61a3540f65