0

如何根据我在 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...

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

4

1 回答 1

0

你可以尝试这样的事情：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

于 2013-01-29T08:29:30.663 回答