如何使用 JSON 定义创建 html 表单？
Posted
技术标签:
【中文标题】如何使用 JSON 定义创建 html 表单？【英文标题】：how to create a html form using a JSON definition? 【发布时间】：2011-07-27 09:40:50 【问题描述】：我正在寻找一个 javascript 库，它使我能够以 JSON 格式存储 (html) 表单，并在验证输入客户端中内置了一些智能。比如：
function FormController()
this.user =
name: 'John Smith',
address:line1: '123 Main St.', city:'Anytown', state:'AA', zip:'12345',
contacts:[type:'phone', value:'1(234) 555-1212']
;
this.state = /^\w\w$/;
this.zip = /^\d\d\d\d\d$/;
（取自http://docs.angularjs.org/#!cookbook.form）。这几乎是我想要的，因为它提供了带有正则表达式的基本客户端验证，并且您可以提供默认值，但它似乎仍然需要您创建 HTML 表单。
我想要一些只需要定义的东西。有什么想法吗？
【问题讨论】：
有点过时，但由于您提到 AngularJS 作为链接，您还可以尝试通过Angular Schema Form 从 JSON 模式自动生成表单，它还支持 Bootstrap 3 :D 【参考方案1】：在无耻的自我推销中，我还要提一下我的jQuery.dForm plugin。它已经存在了一段时间，并且支持 jQuery 验证插件、jQuery UI 并且易于扩展。看起来是这样的：
var formdata =
"action" : "index.html",
"method" : "get",
"elements" :
[
"name" : "textfield",
"caption" : "Label for textfield",
"type" : "text",
"value" : "Hello world"
,
"type" : "submit",
"value" : "Submit"
]
;
$("#myform").buildForm(formdata);
// Or to load the form definition via AJAX
$("#myform").buildForm("http://example.com/myform.json");
【讨论】：
@Daff - 这对于快速轻松地生成 HTML 表单非常有用。但是，我想自己处理表单提交，而不是通过<FORM action='/abc/'> 属性实际提交。如何阻止或以其他方式拦截默认的表单提交事件？目前，我的解决方法是在表单 div 下添加我自己的<button> HTML，为其设置一个 jQuery 侦听器，并将其用于提交。谢谢【参考方案2】：
我建议使用JSON Form。
它需要JSON Schema 并可以立即为它制作一个表格，此外还为您提供进一步自定义表格的选项。例如：
$('#myform').jsonForm(
schema:
name:
type: 'string',
title: 'Name',
required: true
,
age:
type: 'number',
title: 'Age'
);
...将在#myform 元素中生成一个包含两个输入的表单。 （jQuery 是可选的。）
使用标准化格式 JSON Schema 提供了其他巨大优势和更多工具来处理数据定义。
【讨论】：
它在github.com/joshfire/jsonform/tree/master/playground 有一组非常棒的示例，可用于创建包含嵌套对象数组的表单。【参考方案3】：我同意Jeremy S Angular Schema Form 非常出色。它遵循与JSON Form 相同的模式，我已经开始在生产中使用它，并且运行良好。
它也是可扩展的，我很快就编写了一个工具来读取超模式定义并从外部源中提取选择字段选项，并在这样做之前查看其他相关字段的数据。构建它只花了一天时间，可以说它真的很容易扩展，而且它还利用了 Angular，我将它列为最佳选择。
如果您不使用 Angular，那么 JSON Form 将是我的首选，因为我看到它的架构和表单模式正在成为这两个项目使用它的标准。此外，鉴于我在企业服务管理方面的工作经验，几乎所有服务管理工具都有一个数据模型，然后是一个用于扩展模型的表单设计管理组件。
免责声明：我写这篇文章时并没有维护 Angular Schema Form。
一年后我才成为该项目的维护者，因为我已经很喜欢它了。
【讨论】：
【参考方案4】：一定要看看羊驼： http://www.alpacajs.org
它使用 Bootstrap、jQueryUI、jQuery Mobile 或直接的 Web 控件从 JSON Schema 呈现 HTML 表单。它有一个庞大的控件库和各种漂亮的功能。
我们在 Cloud CMS (http://www.cloudcms.com) 中使用它来呈现一些非常直观的 UI。
Alpaca 本身已获得 Apache 2.0 许可并在 GitHub (https://github.com/gitana/alpaca) 上。
即将发布的 1.5.0 版本引入了纯 Handlebars 支持和自定义 gulp 构建。很酷的东西。
【讨论】：
【参考方案5】：Angular 不能立即解决您的问题，因为它假定您有静态 html，您希望将一些数据绑定到该静态 html。
话虽如此，您可以使用 Angular 来实现您的目标。您可以创建一个新标签（角度小部件），它将采用 js 对象并动态创建表单 DOM 以及所有角度验证属性。然后，您使用 Angular 的编译器编译表单并将其附加到您的页面。这将导致动态创建的表单具有所有现有 Angular 的验证和数据绑定功能，就像使用静态 html 一样。
没有什么可以阻止您通过 angular.widget api 执行此操作，但这不是一项简单的任务。
您能告诉我更多关于您的数据结构的信息吗？我想知道是否只有一组表格并在正确的时间使用正确的表格是不够的。为什么需要完全动态和数据驱动的表单创建？
更新：可以在https://groups.google.com/forum/#!topic/angular/f8KbLtT_Mqs找到角度解决方案
【讨论】：
我正在制作一个插件系统，以使第 3 方能够添加组件。我希望他们能够请求用户数据，但我不想让他们访问我页面的实际 js 或 html。因此，他们需要一个灵活的选项来定义他们需要的用户输入，并且应该获得客户端数据验证和服务器端验证的选项。 甜蜜。听起来不错。我们可以将此讨论移至我们的邮件列表吗：groups.google.com/forum/?lnk=srg#!forum/angular 堆栈溢出文本区域正在杀死我。只需在那里开始一个新线程。之后我们将重新发布有关堆栈溢出的最终解决方案。【参考方案6】：我可以谦虚地建议Metawidget吗？
它从任意复杂的 JSON 对象生成 HTML 表单。简单的 JavaScript 示例：
<!DOCTYPE HTML>
<html>
<head>
<script src="http://metawidget.org/js/4.0/metawidget-core.min.js"></script>
<style>
#metawidget
border: 1px solid #cccccc;
width: 250px;
border-radius: 10px;
padding: 10px;
margin: 50px auto;
</style>
</head>
<body>
<div id="metawidget"></div>
<script type="text/javascript">
var mw = new metawidget.Metawidget( document.getElementById( 'metawidget' ));
mw.toInspect =
firstname: 'Homer',
surname: 'Simpson',
age: 36
;
mw.buildWidgets();
</script>
</body>
</html>
它还支持：
使用其他元数据源（例如 JSON Schema 或来自 REST 服务的元数据）增强 JSON 对象 JQuery UI、JQuery Mobile、AngularJS等框架 第三方组件库和验证器 可插拔布局【讨论】：
您可能应该更明确地提及您作为该框架的创建者参与了该框架，这是一个很酷的框架，恭喜。很高兴你有 json-schema 支持，我希望在 json-schema-org 提出一个 json-ui-schema 提案，以使 UI 生成在基于 json-schema 的 UI 实现中更加一致:)【参考方案7】：查看jQuery Templates plugin。 不久前，我在Client-side Data Binding with jQuery Templates 上写了一篇小博文。在我看来，这正是您要寻找的。p>
【讨论】：
有趣，但这并不是我想要的。问题是您必须预先定义html，我事先不知道我想要的字段，因此我希望每个字段都从json对象创建。 那么恐怕您将不得不编写自己的通用例程来创建元素/表格和行。【参考方案8】：我已将 Jeremy Dorn 的 JSON 编辑器用于各种应用程序，并且一直对它感到满意！它使用 JSON Schema，并为表单生成添加了一些选项（因为您可以想象给定类型的数据结构有多种输入）
https://github.com/jdorn/json-editor
【讨论】：
【参考方案9】：查看InputEx，看起来正是您想要的。
它使用 JSON 来定义 整个 形式：
// Create a schemaIdentifierMap
var schemaIdentifierMap =
// Person definition
"Person":
"id": "Person",
"description":"A person",
"type":"object",
"properties":
"name": "type":"string",
"born" : "type":"string", "format":"date", "optional":true,
"gender" : "type":"string", "choices": [ "value":"male","label":"Guy", "value":"female","label":"Girl" ],
"grownup": "type": "boolean" ,
"favoritecolors": "type": "array" ,
"address":
"type":"object",
"properties":
"street":"type":"string",
"city":"type":"string",
"state":"type":"string"
;
（来自http://neyric.github.com/inputex/examples/json-schema.html）
【讨论】：
【参考方案10】：看看brutusin:json-forms。
它接受 JSON 架构和初始 JSON 数据来填充表单。
【讨论】：
以上是关于如何使用 JSON 定义创建 html 表单？的主要内容，如果未能解决你的问题，请参考以下文章