Question

我正在寻找一个javascript lib，它允许我以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表单。

我想要一些只需要定义的东西。有什么想法吗？

Answer 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");

Answer 2

我建议使用JSON Form。

它需要JSON Schema并且可以立即为其制作表单，并且还为您提供了进一步自定义表单的选项。 E.g：

$('#myform').jsonForm({
  schema: {
    name: {
      type: 'string',
      title: 'Name',
      required: true
    },
    age: {
      type: 'number',
      title: 'Age'
    }
  }
});

...会在#myform元素中生成一个带有两个输入的表单。（jQuery是可选的。）

使用标准化格式JSON Schema提供了其他巨大优势和更多工具来处理数据定义。

Answer 3

我同意Jeremy S Angular Schema Form非常出色。它遵循与JSON Form相同的模式，我已经开始在生产中使用它并且它运行良好。

它也是可扩展的，我很快就编写了一个工具来读取超模式定义并从外部源中提取选择字段选项，并在这之前观察其数据的其他相关字段。构建它只花了一天时间，足以说它很容易扩展，因为它也利用了Angular我会把它归类为最佳选择。

如果你没有使用Angular，那么JSON Form将是我的首选选项，因为我看到它的架构和表单模式在这两个项目使用它时出现了一些标准。另外，根据我在企业服务管理方面的经验，几乎所有服务管理工具都有数据模型，然后是表单设计管理组件，用于扩展模型。

免责声明：我写这篇文章时，我没有保留Angular Schema Form。

一年后我才成为该项目的维护者，因为我已经喜欢它了。

Answer 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版本引入了纯手柄支持和自定义gulp构建。很酷的东西。

Answer 5

Angular并不能解决你的问题，因为它假设你有静态html，你想要绑定一些数据。

说过你可以使用棱角来实现你的目标。您可以创建一个新标记（角度小部件），它将获取一个js对象并动态创建表单DOM以及所有角度验证属性。然后使用angular的编译器编译表单并将其附加到页面。这将导致动态创建的表单，所有现有的角度验证和数据绑定功能都像静态html一样工作。

我无法想到会阻止你通过angular.widget api做这件事，但这不是一项微不足道的任务。

您能告诉我有关您的数据结构的更多信息吗？我想知道是否只有一套表格并在正确的时间使用正确的表格是不够的。为什么需要通过完全动态和数据驱动来创建表单？

更新：角度解决方案可在https://groups.google.com/forum/#!topic/angular/f8KbLtT_Mqs

找到

Answer 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对象，例如JSON Schema或来自REST服务的元数据
框架，如JQuery UI，JQuery Mobile，AngularJS
第三方组件库和验证器
可插拔布局

Answer 7

查看jQuery Templates plugin 不久前我在Client-side Data Binding with jQuery Templates上写了一篇小博文。在我看来，这正是你正在寻找的。

Answer 8

我已经将Jeremy Dorn的JSON编辑器用于各种应用程序，并且一直对它感到满意！它使用JSON Schema，并为表单生成添加了一些选项（因为您可以想象为给定类型的数据结构提供各种输入）

https://github.com/jdorn/json-editor

Answer 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）

Answer 10

看看brutusin:json-forms。

它接受JSON-Schema和填充表单的初始JSON数据。

如何使用JSON定义创建html表单？

10 个答案: