如何驗證使用JSON讀取表單數據？

我正在創建基於JSON數據的表單嚮導。我已經創建了基於JSON提要的表單，並且我的工作正常，接下來是如何將jquery validation.js合併到我的代碼中。如何驗證使用JSON讀取表單數據？

我使用jquery.dfrom以基於JSON例子形式在這裏 https://github.com/daffl/jquery.dform

接下來，我想驗證它被提交之前用戶輸入（S）生成的表單。

我如何驗證這個生成的html表單？感謝

<!DOCTYPE html> 
    <html> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
     <title>JSOn based form wizard jQuery dForm</title> 
    </head> 
    <style type="text/css"> 
     input, label { 
      display: block; 
      margin-bottom: 5px; 
     } 
    </style> 
    <body> 


    <form id="demo-2-form"></form> 


    <!-- Load jQuery and the minified plugin --> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script type="text/javascript" src="dist/jquery.validate.js"></script> 
    <script type="text/javascript" src="dist/jquery.dform-1.0.1.js"></script> 


    <script type="text/javascript" class="demo" id="demo-2"> 
    $('#demo-2-form').dform({ 
     "action":"index.html", 
     "method":"post", 
     "html":[ 
      { 
       "type":"fieldset", 
       "caption":"User information", 
       "html":[ 
        { 
         "name":"email", 
         "caption":"Email address", 
         "type":"text", 
         "placeholder":"E.g. [email protected]", 
         "validate":{ 
          "email":true 
         } 
        }, 
        { 
         "name":"password", 
         "caption":"Password", 
         "type":"password", 
         "id":"registration-password", 
         "validate":{ 
          "required":true, 
          "minlength":5, 
          "messages":{ 
           "required":"Please enter a password", 
           "minlength":"At least {0} characters long" 
          } 
         } 
        }, 
        { 
         "name":"password-repeat", 
         "caption":"Repeat password", 
         "type":"password", 
         "validate":{ 
          "equalTo":"#registration-password", 
          "messages":{ 
           "equalTo":"Please repeat your password" 
          } 
         } 
        }, 
        { 
         "type":"radiobuttons", 
         "caption":"Sex", 
         "name":"sex", 
         "class":"labellist", 
         "options":{ 
          "f":"Female", 
          "m":"Male" 
         } 
        }, 
        { 
         "type":"checkboxes", 
         "name":"test", 
         "caption":"Receive newsletter about", 
         "class":"labellist", 
         "options":{ 
          "updates":"Product updates", 
          "errors":{ 
           "value":"security", 
           "caption":"Security warnings", 
           "checked":"checked" 
          } 
         } 
        } 
       ] 
      }, 
      { 
       "type":"fieldset", 
       "caption":"Address information", 
       "html":[ 
        { 
         "name":"name", 
         "caption":"Your name", 
         "type":"text", 
         "placeholder":"E.g. John Doe" 
        }, 
        { 
         "name":"address", 
         "caption":"Address", 
         "type":"text", 
         "validate":{ "required":true } 
        }, 
        { 
         "name":"zip", 
         "caption":"ZIP code", 
         "type":"text", 
         "size":5, 
         "validate":{ "required":true } 
        }, 
        { 
         "name":"city", 
         "caption":"City", 
         "type":"text", 
         "validate":{ "required":true } 
        }, 
        { 
         "type":"select", 
         "name":"continent", 
         "caption":"Choose a continent", 
         "options":{ 
          "america":"America", 
          "europe":{ 
           "selected":"true", 
           "id":"europe-option", 
           "value":"europe", 
           "html":"Europe" 
          }, 
          "asia":"Asia", 
          "africa":"Africa", 
          "australia":"Australia" 
         } 
        } 
       ] 
      }, 
      { 
       "type":"submit", 
       "value":"Signup" 
      } 
     ] 
    }); 
    </script> 
    </body> 
    </html>

來源

2012-10-16 user244394

你有沒有嘗試過包括jQuery Validate js文件和初始化它所需的代碼？ –

我想你指的是this plugin進行驗證，在這種情況下，你需要的類添加到表單，告訴它你是哪種類型的驗證之後。從你的代碼示例看來，這不像是你之後的確切庫，但它應該與實現相似。在將來，請確保指定這些東西 - 像這樣的細節是非常重要的。

這個dform插件的確不是而是有一個內置的回調函數，所以你不知道表單在頁面上的確切時間。這意味着任何立即運行在表單上的驗證插件都會因爲缺少回調而難以實現。另一方面，如果您正在使用僅通過將提交處理程序附加到表單的方式工作的驗證插件，則只需調用該插件即可，無需對代碼進行其他更改，正如Kevin B在第一條評論中所建議的那樣。無論採用哪種方式，只要您在提交表單後以編程方式運行驗證插件，就可以了。你應該可以爲任何像樣的插件做到這一點 - 我鏈接到上面的jQuery驗證確實有這種能力（儘管它沒有做出令人驚歎的工作）。你會像這樣運行：

$('#demo-2-form').on('submit', function(e){ 
    e.preventDefault(); 
    if ($(this).validate().form()) { 
    $(this).submit(); 
    } else { 
    console.log("fill your form out right man!"); 
    } 
});

這將根據您設置的參數驗證表單，但對於這個特殊的插件不給你回了很多有用的信息來標記的錯誤。還有其他方法可以用來做到這一點（對於這個插件，你必須循環遍歷每個領域檢查它的錯誤），但我認爲這是不值得寫在這裏。

真的，我還沒有遇到一個很好的JavaScript驗證庫（並沒有我的同事）。您可以在這裏抓住提交併寫出驗證，這可能是值得的 - 這種方式會更加清晰，並且您可以按照自己的方式進行自定義。另外，這些驗證中的每一個都可以寫在JavaScript的一行左右。這通常是我最終做的，而且幾乎不需要更多的時間。您可以使用與上述相同的方法來捕獲提交，只需用幾行代替jquery validate插件行來檢查您的字段並驗證它們即可。

來源

2012-10-16 15:15:54

如何驗證使用JSON讀取表單數據？

回答

相關問題