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 に答える