使用 JQuery 从 JSON 或 XML 提要生成 HTML 表单

Generating HTML forms from JSON or XML feed using JQuery

提问by user244394

I would like to create an HTML form based on XML or JSON data using Jquery and I also plan to validate any form fields that may be empty or incorrect.

我想使用 Jquery 创建基于 XML 或 JSON 数据的 HTML 表单，我还计划验证任何可能为空或不正确的表单字段。

I would like to know if there are any other programs/functions that generate such a form dynamically on the fly and the best way to go about implementing this. Any jquery widgets or libraries that work best with workings examples would be much appreciated

我想知道是否有任何其他程序/函数可以动态生成这样的表单，以及实现它的最佳方法。任何最适合工作示例的 jquery 小部件或库都将不胜感激

And also what feed to best use in this scenario XML or JSON and explain why?

还有什么提要最适合在这种情况下使用 XML 或 JSON 并解释原因？

Thanks

谢谢

采纳答案by user244394

I've found some of these that might help you:

我发现其中一些可能对您有所帮助：

Generating forms from JSON schema:

从 JSON 模式生成表单：

• how to create a html form using a JSON definition?
• http://neyric.github.com/inputex/examples/json-schema.html
• JavaScript to generate/render dynamic HTML form from JSON or similar data?
• Any tool to generate html form

• 如何使用 JSON 定义创建 html 表单？
• http://neyric.github.com/inputex/examples/json-schema.html
• JavaScript 从 JSON 或类似数据生成/呈现动态 HTML 表单？
• 任何生成html表单的工具

Generating forms from an XML schema:

从 XML 模式生成表单：

• http://www.totallysmartit.com/examples/xml/questionnaire/
• Create HTML form from XML
• http://www.datamech.com/XMLForm/

• http://www.totallysmartit.com/examples/xml/questionnaire/
• 从 XML 创建 HTML 表单
• http://www.datamech.com/XMLForm/

Samples from different libraries to generate form:

来自不同库的示例以生成表单：

• http://www.alpacajs.org/examples.html
• http://jsonforms.io/#/examples
• http://schemaform.io/examples/bootstrap-example.html

• http://www.alpacajs.org/examples.html
• http://jsonforms.io/#/examples
• http://schemaform.io/examples/bootstrap-example.html

回答by idelvall

Just to give you another choice, a library I created:

只是为了给你另一种选择，我创建了一个库：

https://github.com/brutusin/json-forms

https://github.com/brutusin/json-forms

JSON Schema to HTML form generator, supporting dynamic subschemas (on the fly resolution). Extensible and customizable library with zero dependencies. Bootstrap add-ons provided

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

 var bf = brutusin["json-forms"].create({
  "$schema": "http://json-schema.org/draft-03/schema#",
  "type": "object",
  "properties": {
    "s1": {
      "type": "string",
      "title": "A string",
      "description": "A string input"
    },
    "num1": {
      "type": "integer",
      "title": "A number",
      "minimum": 1,
      "maximum": 10,
      "multipleOf": 3,
      "description": "An integer multiple of `3`, between `1` and `10` (inclusive)"
    },
    "array1": {
      "type": "array",
      "title": "An array values",
      "items": {
        "type": "object",
        "properties": {
          "value": {
            "type": "string",
            "title": "Value"
          }
        }
      }
    }
  }
});
var container = document.getElementById('container');
bf.render(container);

<link rel="stylesheet" href='https://cdn.jsdelivr.net/brutusin.json-forms/1.3.2/css/brutusin-json-forms.min.css'/>
<link rel="stylesheet" href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'/>
<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/brutusin.json-forms/1.3.2/js/brutusin-json-forms.min.js"></script>
<script src="https://cdn.jsdelivr.net/brutusin.json-forms/1.3.2/js/brutusin-json-forms-bootstrap.min.js"></script>
<div id="container"></div>
<hr>
<button class="btn btn-primary" onclick="alert(JSON.stringify(bf.getData(), null, 4))">getData()</button>&nbsp;<button class="btn btn-primary" onclick="if (bf.validate()) {alert('Validation succeeded')}">validate()</button>

More live examples at http://brutusin.org/json-forms

更多现场示例，请访问http://brutusin.org/json-forms