mdn - html表单按钮




如何使用JSON定义创建html表单? (7)

我正在寻找一个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表单。

我想要一些只需要定义的东西。 有任何想法吗?


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

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

没有什么我能想到的会阻止你通过angular.widget api来做这件事,但这不是一项微不足道的任务。

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

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


在无耻的自我推销中,我还想提一下我的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");

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

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

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

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

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


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

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




绝对查看羊驼: http//www.alpacajs.org

它使用Bootstrap,jQueryUI,jQuery Mobile或直接Web控件从JSON Schema呈现HTML表单。 它有一个大型控件库和各种漂亮的功能。

我们在Cloud CMS( http://www.cloudcms.com )上使用它来呈现一些非常直观的UI。

羊驼本身是Apache 2.0许可的,在GitHub上( https://github.com/gitana/alpaca )。

即将推出的1.5.0版本引入了纯手柄支持和自定义gulp构建。 很酷的东西。





dynamic