如何从json模式创建表单

How to Create a form from a json-schema?

本文关键字：创建 表单 模式 json      更新时间：2023-11-14

如何从JSON模式创建表单？

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

所以我从JSON模式中获得了一些创建表单的链接。

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

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

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

我一直在寻找同样的东西，结果发现有一些不错的选择。这些是我能在GitHub:上找到的最好的库

  • JSON编辑器（纯JS）（演示）

  • Angular Schema Form（AngularJS）（演示）

  • React JSONSchema Form（React）（演示）

jsonform-从JSON模式构建表单。易于模板化。与开箱即用的Twitter引导程序兼容。

https://github.com/joshfire/jsonform

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

JSON模式驱动的表单使用jQuery和Bootstrap、jQuery UI/Mobile的布局引擎。它的可扩展性很强，装饰也很漂亮。

Apache2.0授权的很棒的社区（我是一名代码提交者）。

或者。。。你可以看看跑赢大盘。这是一个小的javascript表单生成器库，我最近写它来支持我自己的项目，因为我受够了这样一个事实：我看到的所有表单生成器要么有大量的依赖项，要么明显比我的单页web应用程序大。

我的意思是，让我们面对现实吧：如果我的SPA是20KB未经优化但经过gzip映射的，那么我希望做一些简单的事情（如生成表单）的库例程要小得多。它的主要功能是：

  • 零依赖关系
  • 填充量较少（未混合但使用gzipped：<2KB）
  • 本地HTML5/浏览器验证支持所有HTML5+输入类型
  • 自定义验证似乎没有集成
  • 支持所有的web框架（包括Bootstrap）
  • 在所有浏览器中重新加载页面时，自动填充半填充的表单
  • JSON设置/获取所有表单值

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

在你的情况下，如果你只对创建一个表单感兴趣，也许直接编码它会更好

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

json形式：

JSON模式到HTML表单生成器，支持动态子模式（动态解析）。可扩展且可自定义的库，无任何依赖关系。提供的引导加载项

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

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

JSONForms通过利用JSON和JSON模式的功能来创建表单，从而消除了编写HTML模板的需要，从而扩展了视图模型方法。它支持React、Angular和Vue。

GitHub:JSONForms（Demo）

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

将json模式转换为表单的jquery插件这可能对您的场景有所帮助

我发现https://form.io到目前为止，这是我发现的这方面最先进的项目。可拖动的窗体创建渲染的架构。他的核心是开源的。

看看这个ngx模式形式的演示（源代码）：

  • 获取JSON架构文件
  • 将其生成为可完全工作的可编辑网页表单
  • 将对JSON模型的更改保存为Javascript对象
  • 允许为任何部分添加自定义验证程序代码

这对我来说真的很好（我几天前才发现）。我在最新的Angular中使用了它，它的工作方式与文档中的完全一样。

另一个选项是"json-schema-js-gui模型"。它将json模式转换为gui模型，您可以在任何web框架中轻松使用该模型来创建自定义表单。关于最后一步的详细建议，angular 2文档提供了从gui模型创建动态表单的配方。

相关文章：