如何使用 JSON 定义创建 html 表单？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5508871/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to create a html form using a JSON definition?
提问by Ed_
I am looking for a javascript lib which enables me to store (html) forms in JSON format, with a bit of intelligence built into validate inputs client side. Something like:
我正在寻找一个 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$/;
}
(This is taken from http://docs.angularjs.org/#!cookbook.form). It's almost what I want, as it offers basic client side validation with regular expressions and you can provide defaults but it appears to still need you to create the HTML form.
（这是取自http://docs.angularjs.org/#!cookbook.form）。这几乎就是我想要的，因为它提供了带有正则表达式的基本客户端验证，您可以提供默认值，但它似乎仍然需要您创建 HTML 表单。
I want something that only requires the definition. Any ideas?
我想要一些只需要定义的东西。有任何想法吗？
回答by Daff
In shameless self promotion I would also like to mention my jQuery.dForm plugin. It's been around for a while now and support the jQuery validation plugin, jQuery UI and is easily extensible. This is how it looks:
在无耻的自我宣传中，我还想提一下我的jQuery.dForm 插件。它已经存在一段时间了，支持 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");
回答by fiddur
I would suggest using JSON Form.
我建议使用JSON Form。
It takes a JSON Schemaand can instantly make a form for it, and additionally give you options to customize the form further. E.g.:
它需要一个JSON 模式，可以立即为其创建一个表单，另外还为您提供进一步自定义表单的选项。例如：
$('#myform').jsonForm({
schema: {
name: {
type: 'string',
title: 'Name',
required: true
},
age: {
type: 'number',
title: 'Age'
}
}
});
…would generate a form with two inputs in #myform element. (jQuery is optional.)
...将在#myform 元素中生成具有两个输入的表单。（jQuery 是可选的。）
Using the standardized format JSON Schema gives other great advantages and more tools to work with the data definition.
使用标准化格式 JSON Schema 提供了其他巨大优势和更多工具来处理数据定义。
回答by Anthropic
I would agree with Jeremy SAngular Schema Formis outstanding. It follows the same pattern as JSON Formand I have started using it in production and it is working very well.
我同意Jeremy S Angular Schema Form非常出色。它遵循与JSON Form相同的模式，我已经开始在生产中使用它，并且运行良好。
It is also extensible and I quite quickly wrote a tool to read hyper-schema definition and pull in select field options from an external source and watch other related fields for their data before doing so. It took only a day to build that, suffice to say it is really easy to extend and as it also takes advantage of Angular I would class it as the best choice.
它也是可扩展的，我很快就编写了一个工具来读取超模式定义并从外部源中提取选择字段选项，并在这样做之前观察其他相关字段的数据。构建它只花了一天时间，可以说它真的很容易扩展，而且它也利用了 Angular，我将它归类为最佳选择。
If you are not using Angular then JSON Form would be my preferred option since I see its schema and form pattern emerging as a bit of a standard with these two projects using it. Also given my experience working in enterprise service management it makes sense as nearly all tools for service management have a data model and then a form design administration component for extending the model.
如果您不使用 Angular，那么 JSON Form 将是我的首选，因为我看到它的架构和表单模式正在成为这两个使用它的项目的标准。考虑到我在企业服务管理方面的工作经验，这很有意义，因为几乎所有的服务管理工具都有一个数据模型，然后是一个用于扩展模型的表单设计管理组件。
Disclaimer: I was not maintaining Angular Schema Form when I wrote this.
免责声明：我在写这篇文章时并没有维护 Angular Schema Form。
I only became the maintainer on the project a year later because I already loved it.
一年后我才成为该项目的维护者，因为我已经爱上了它。
回答by Michael Uzquiano
Definitely check out Alpaca: http://www.alpacajs.org
一定要看看羊驼：http: //www.alpacajs.org
It renders HTML forms from JSON Schema using Bootstrap, jQueryUI, jQuery Mobile or straight web controls. It has a large library of controls and all sorts of nifty features.
它使用 Bootstrap、jQueryUI、jQuery Mobile 或直接的 Web 控件从 JSON Schema 呈现 HTML 表单。它有一个庞大的控件库和各种漂亮的功能。
We use it at Cloud CMS (http://www.cloudcms.com) to render some really intuitive UIs.
我们在 Cloud CMS ( http://www.cloudcms.com) 中使用它来呈现一些非常直观的 UI。
Alpaca itself is Apache 2.0 licensed and on GitHub (https://github.com/gitana/alpaca).
Alpaca 本身已获得 Apache 2.0 许可并位于 GitHub ( https://github.com/gitana/alpaca) 上。
The coming 1.5.0 release introduces pure Handlebars support and custom gulp builds. Pretty cool stuff.
即将发布的 1.5.0 版本引入了纯 Handlebars 支持和自定义 gulp 构建。很酷的东西。
回答by Richard Kennard
May I humbly suggest Metawidget?
我可以虚心推荐Metawidget吗？
It generates HTML forms from arbitrary complex JSON objects. Simple JavaScript example:
它从任意复杂的 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>
It also supports:
它还支持：
- augmenting the JSON object with additional sources of metadata, such as JSON Schema or metadata from REST services
- frameworks such as JQuery UI, JQuery Mobile, AngularJS
- third-party component libraries and validators
- pluggable layouts
- 使用额外的元数据源扩充 JSON 对象，例如 JSON Schema 或来自 REST 服务的元数据
- 框架，如 JQuery UI、JQuery Mobile、AngularJS
- 第三方组件库和验证器
- 可插拔布局
回答by Igor Minar
Angular doesn't solve your problem out of the box because it asumes that you have static html which you want to bind some data to.
Angular 不能立即解决您的问题，因为它假定您有静态 html，您想将一些数据绑定到该 html。
Having said that you can use angular to fulfill your objectives. You can create a new tag (angular widget) which will take a js object and dynamically creates the form DOM along with all the angular validation attributes. You then compile the form with angular's compiler and attach it to your page. This will result in dynamically created form with all the existing angular's validation and databinding features working just like with a static html.
话虽如此，您可以使用 angular 来实现您的目标。您可以创建一个新标签（角度小部件），它将接受一个 js 对象并动态创建表单 DOM 以及所有角度验证属性。然后，您使用 angular 的编译器编译表单并将其附加到您的页面。这将导致动态创建的表单具有所有现有的 angular 验证和数据绑定功能，就像使用静态 html 一样。
There is nothing I can think of that would prevent you from doing this via angular.widget api, but it's not a trivial task.
我想不出什么可以阻止您通过 angular.widget api 执行此操作，但这不是一项微不足道的任务。
Can you tell me more about your data structures? I wonder if having just a set of forms and using the right one at the right time wouldn't be sufficient. Why do you need the form creation to by completely dynamic and data-driven?
你能告诉我更多关于你的数据结构的信息吗？我想知道是否只有一组表格并在正确的时间使用正确的表格还不够。为什么需要完全动态和数据驱动的表单创建？
UPDATE: The angular solution can be found at https://groups.google.com/forum/#!topic/angular/f8KbLtT_Mqs
更新：角度解决方案可以在https://groups.google.com/forum/#!topic/angular/f8KbLtT_Mqs找到
回答by Fabio Beltramini
I've used Jeremy Dorn's JSON Editor for various applications and have always been satisfied with it! It uses JSON Schema, and adds some options for the form generation (as you could conceivably have a variety of inputs for a given type of data structure)
我已经将 Jeremy Dorn 的 JSON 编辑器用于各种应用程序，并且一直对它感到满意！它使用 JSON Schema，并为表单生成添加了一些选项（因为您可以想象给定类型的数据结构有多种输入）
回答by Kon
Check out jQuery Templates plugin.
A little while back I wrote up a little blog post on Client-side Data Binding with jQuery Templates. It seems to me that this is exactly what you're looking for.
查看jQuery 模板插件。
不久前，我写了一篇关于使用 jQuery 模板进行客户端数据绑定的博客文章。在我看来，这正是您要寻找的。
回答by dakhota
Check out InputEx, it seems exactly what you want.
查看InputEx，它似乎正是您想要的。
It uses JSON to define the entireform:
它使用 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"}
}
}
}
}
};
(from http://neyric.github.com/inputex/examples/json-schema.html)
（来自http://neyric.github.com/inputex/examples/json-schema.html）
回答by idelvall
Take a look at brutusin:json-forms.
It accepts a JSON-Schema and the initial JSON data to populate the form.
它接受 JSON-Schema 和初始 JSON 数据来填充表单。
