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

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插件.它已经存在了一段时间并且支持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表格.

它需要一个JSON Schema,并且可以立即为它创建一个表单,并且还为您提供了进一步自定义表单的选项.例如:

$('#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

查看jQuery 模板插件。
不久前，我写了一篇关于使用 jQuery 模板进行客户端数据绑定的小博客文章。在我看来，这正是您正在寻找的。