使用JSON中定义的规则创建HTML表单

Question

如何根据JSON中的规则创建HTML表单？

所以我需要创建一个像这样的表单

我的规则如JSON所示;

{
   "modules":[
      {
         "type":"navigation",
         "container":"#header",
         "title":"Top Navigation",
         "attributes":{
            "class":"topNavigation",
            "id":"topNavigation"
         }
      },
      {
         "type":"content",
         "title":"Hi Welcome to mobile development",
         "subtitle":"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
         "container":"#maincontent",
         "attributes":{
            "class":"topContent"
         }
      },
      {
         "type":"form",
         "title":"Registration Form",
         "action":"submit.aspx",
         "name":"registrationform",
         "container":"#maincontent",
         "attributes":{
            "class":"registrationform"
         },
         "fields":[
            {
               "id":"firstname",
               "label":"First Name",
               "name":"fname",
               "type":"text",
               "value":""
            },
            {
               "id":"email",
               "label":"Email",
               "name":"email",
               "type":"text",
               "value":""
            },
            {
               "id":"countries",
               "label":"Country",
               "name":"countries",
               "type":"select",
               "options":[
                  {
                     "value":"",
                     "text":"Select Country"
                  },
                  {
                     "value":"in",
                     "text":"India",
                      "selected":"true"
                  },
                  {
                     "value":"us",
                     "text":"United Stated"

                  },
                  {
                     "value":"uk",
                     "text":"United Kingdom"
                  },
                  {
                     "value":"cn",
                     "text":"Canada"
                  }
               ]
            },
            {
               "id":"submit",
               "name":"submit",
               "type":"submit",
               "value":"Submit"
            }
         ],
         "rules":
            {
                "fname" : "required", 
                "email"     :   {
                                    "required": "true",
                                    "email": "true"
                                }
            },
         "messages":
            {
                "fname" : "Enter your firstname",
                "email" :   {
                                "required": "Please enter a valid email address",
                                "minlength": "Please enter a valid email address"
                            }
            }
      }
   ]
}

虽然我使用普通的HTML / JS代码来创建这样的表单，但我不确定如何从JSON解析事物/规则然后将其应用于HTML？

我需要使用JS为HTML创建DOM ...

请提供我可以查看的任何类似参考资料。

Answer 1

你可以尝试这样的事情：http://jsfiddle.net/epk6Z/

对于小提琴我使用变量json

$.each(json.modules, function (i, items) {
  $('<' + items.formElem + '/>').attr({
    "action": items.action,
        "name": items.name,
        "class": items.attributes.class
  }).appendTo('body');
  $('<h1/>').text(items.title).appendTo('.registrationform');
});

在ajax中，这应该是这样的成功函数：

success: function(data){
 $.each(data.modules, function (i, items) {
  $('<' + items.formElem + '/>').attr({
    "action": items.action,
        "name": items.name,
        "class": items.attributes.class
  }).appendTo('body');
  $('<h1/>').text(items.title).appendTo('.registrationform');
 });
} 

还有很多其他的变化，但这只是我用过的最轻微的用法。

JSON

{
"modules": [{
    "nav": "navigation",
        "container": "#header",
        "title": "Top Navigation",
        "attributes": {
        "class": "topNavigation",
            "id": "topNavigation"
    }
}, {
    "page-content": "content",
        "title": "Hi Welcome to mobile development",
        "subtitle": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
        "container": "#maincontent",
        "attributes": {
        "class": "topContent"
    }
}, {
    "formElem": "form", //<-----------i targeted this
        "title": "Registration Form",
        "action": "submit.aspx",
        "name": "registrationform",
        "container": "#maincontent",
        "attributes": {
        "class": "registrationform"
    }
    ...............

注意：

Its not a full answer i just appended the form and the title of the form