使用JQuery從JSON或XML提要生成HTML表單

Question

我想使用Jquery創建基於XML或JSON數據的HTML表單，並且我還計劃驗證任何可能爲空或不正確的表單字段。

我想知道是否有任何其他程序/函數可以動態地生成這樣的表單，並且是實現這個功能的最佳方式。任何jQuery的小部件或圖書館工作最好的工作示例將不勝感激

而且什麼飼料最好的使用在這種情況下XML或JSON和解釋原因？

感謝

Answer 1

我發現其中的一些可以幫助你：從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?
從XML模式種
• Any tool to generate html form

發電形式：

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

從不同的樣品庫生成形式：

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

Answer 2

只給你一個選擇，我創建了一個庫：

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

將JSON模式轉換爲HTML表單生成器，支持動態子模板（動態分辨率）。具有零依賴關係的可擴展和可定製庫。引導加載項在http://brutusin.org/json-forms

提供

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>

更多活生生的實例