如何从 json 模式创建表单？ [关闭]答案

【问题标题】：How to Create a form from a json-schema? [closed]如何从 json 模式创建表单？ [关闭]
【发布时间】：2013-12-13 00:16:49
【问题描述】：

如何从 JSON Schema 创建表单？

我正在用 JavaScript 和 jquery 编写代码。使用像 Form 这样的模板部分，我正在使用 haml 创建它并将其添加到 js 文件中。对于后端，我使用的是 python。我正在使用 Django 框架。

所以我得到了一些从 JSON Schema 创建表单的链接。

参考链接： http://neyric.github.io/inputex/examples/json-schema.html

在我的表格中：输入元素：存在文本框、文本区域、选择列表、提交和取消按钮。

所以我想问一下用 JSON 模式创建表单是否可行？如果是的话，你能提供一些好的链接吗？

【问题讨论】：

标签： javascript python django python-2.7 django-views

【解决方案1】：

我一直在寻找相同的方法，结果发现有一些不错的选择。这些是我在 GitHub 上能找到的最好的库：

JSON Editor（纯 JS）(demo)
Angular Schema Form (AngularJS) (demo)
React JSONSchema Form（反应）（demo）

【讨论】：

【解决方案2】：

jsonform - 从 JSON Schema 构建表单。易于模板化。开箱即可与 Twitter Bootstrap 兼容。

https://github.com/joshfire/jsonform

【讨论】：

jsonform 好像不再维护了。
@Anthropic，感谢您的评论。其他答案包括替代方案。
@Anthropic，看起来 jsonform 已迁移并且现在得到维护（至少在此评论中，它最近已更新）：github.com/jsonform/jsonform

【解决方案3】：

您正在寻找羊驼毛表格。 http://www.alpacajs.org

JSON Schema 驱动的表单使用 jQuery 和 Bootstrap、jQuery UI / Mobile 的布局引擎。它非常可扩展且装饰精美。

获得 Apache 2.0 许可的优秀社区（我是代码提交者）。

【讨论】：

看起来很有希望，但我还没有设法让“网络”版本工作，甚至在线示例页面也坏了。还在维护吗？我已经为这两个问题提交了错误：github.com/gitana/alpaca/issues/506 github.com/gitana/alpaca/issues/507
...当您在做 Alpaca 社区支持时，也许您可以回答这个问题？（我有同样的问题。一旦我让 Alpaca 工作，我会尝试让它渲染到一个临时的 DOM 节点，然后移动渲染的输入来拥有我现有的表单，但希望有一个更清洁的方法。如果没有，请留给我回答，这样我才能得到信任。☺羊驼的options在任何地方都有记录吗？）stackoverflow.com/questions/42767045/…

【解决方案4】：

或者...您可以查看outperform。这是我最近为支持我自己的项目而编写的一个小型 javascript 表单生成器库，因为我厌倦了我所查看的所有表单生成器要么有大量依赖项，要么明显大于我的单页 web-应用。

我的意思是，让我们面对现实吧：如果我的 SPA 是 20KB 未压缩但经过 gzip 压缩的，那么我希望执行一些简单的操作（例如生成表单）的库例程要小得多。它的主要特点是：

零依赖。
填充更少（未压缩但已压缩：
原生 HTML5/浏览器验证支持所有 HTML5+ 输入类型。
无缝集成自定义验证。
支持现有的所有 Web 框架（包括 Bootstrap）。
在所有浏览器中重新加载页面时自动填充半满的表单。
为所有表单值设置/获取 JSON。

【讨论】：

【解决方案5】：

偶然发现了这个问题并想添加这个新选项：

JSONForms 扩展了视图模型方法，无需编写 HTML 模板即可利用 JSON 和 JSON 模式的功能创建表单。它支持 React、Angular 和 Vue。

GitHub：JSONForms (Demo)

【讨论】：

【解决方案6】：

从 JSON Schema 生成表单是一种常见的做法，特别适用于自动生成的用户界面。

在您的情况下，如果您只对创建一个表单感兴趣，那么直接编写代码可能会更好。

这是我创建的一个库，希望你会感兴趣：

json-forms:

JSON 模式到 HTML 表单生成器，支持动态子模式（动态分辨率）。具有零依赖性的可扩展和可定制的库。提供 Bootstrap 插件

http://brutusin.org/json-forms 现场演示

【讨论】：

【解决方案7】：

看看这个项目 https://github.com/mirshahreza/json-edit

一个 jquery 插件，用于将 json 模式转换为表单它可能对您的场景有所帮助

【讨论】：

【解决方案8】：

看看this demo（source code）的ngx-schema-form：

采用 JSON 模式文件
将其生成为完全可用的可编辑网页表单
将 JSON 模型的更改保存为 Javascript 对象
允许为任何部分添加自定义验证器代码

这对我来说非常有效（我几天前才发现它）。我将它与最新的 Angular 一起使用，它的工作方式与文档完全一致。

【讨论】：

第二个链接 (guillotina.io) 已损坏
链接不会永远存在。
我修复了链接

【解决方案9】：

另一个选项是“json-schema-js-gui-model”。它将 json 模式转换为 gui 模型，您可以在任何 Web 框架中轻松使用该模型来创建自定义表单。有关最后一步的详细建议，angular 2 docs 提供了从 gui 模型创建动态表单的秘诀。

【讨论】：

【解决方案10】：

我找到了https://form.io，这是迄今为止我在这方面找到的最先进的项目。可拖动表单创建呈现的架构。他的核心是开源的。

【讨论】：