jQuery驗證多個表單域

jquery相當新，但我意識到我的代碼可以被壓縮。它工作得很好，但有一個更好的方法來做到這一點，因爲它看起來像冗餘代碼。我有兩個輸入字段和一個我正在驗證的textarea，見下文。代碼樣本將是理想的，因爲我還在學習，但任何幫助appreiacted：jQuery驗證多個表單域

$("form#designForm").submit(function(){ 

    if($("#ccDesignFirstName").val().length == 0){ 
     alert("Full Name field is required"); 
     $("#ccDesignFirstName").focus(); 
     return false; 
    }   

    if($(".telephoneInput").is(":visible")){ 
     if($("#ccDesignTelephone").val().length == 0){ 
      alert("Phone is required"); 
      $("#ccDesignTelephone").focus(); 
      return false; 
     } 
    } 

    if($("#ccDesignProblem").val().length == 0){ 
     alert("Question is required"); 
     $("#ccDesignProblem").focus(); 
     return false; 
    } 
});

來源

2013-05-09 Delmon Young

確實是多餘的。你應該看看函數，數組和循環，所以基本上學習Javascript。 jQuery只不過是一個幫助DOM和Ajax的工具。 – kapa 2013-05-09 22:03:27

要通過所有輸入的形式循環，你可以這樣做：

$("form#designForm").submit(function(){ 
    var valid = true; 
    $("form#designForm :input").each(function(){ 
     //$(this) is the jquery object of the input. 
     //do your validation here 
     if($(this).val().length == 0){ 
      valid = false; 
     } 
     //some more validation if needed... 
    }); 
    return valid; 
});

它使用了jQuery [ ：輸入選擇] [1]來獲得所有類型的輸入，如果你只是想文本可以這樣做：

$("form#designForm input[type=text]")

等

來源

2013-05-09 22:47:50 Waqleh

感謝您的回覆@Waleed Akleh我有點困惑你爲什麼有有效的變量。另外說我想瞄準一個特定的領域。例如，我希望是電話號碼的另一種驗證類型。我將如何去做這件事 – 2013-05-10 13:58:33

是的，你可以做幾種不同的表單驗證策略。我個人最喜歡的是將類添加到要驗證的元素。

需要所有字段不能留空？將check-empty類添加到輸入。需要檢查電子郵件驗證？添加一個email類。在JavaScript中，您可以使用單個jQuery選擇器並按類別檢查每個輸入，並確保每個檢查都通過。

我在這裏做了一些小事，併爲每個函數使用了.apply（）。誠實地說，如果你需要做一些異步的事情（比如AJAX請求到服務器以確保電子郵件是唯一的），這種技術不會成功。

如果您需要使用AJAX進行檢查，則需要使用回調來確保所有的驗證。一般來說，類似的事情會發生一次或兩次，所以不需要太過花哨。如果你的表單非常AJAX，那麼你可以考慮使用jQuery的$.Deferred。

讓我知道如果您有任何問題。這僅僅是我對錶單驗證的個人看法，我還有很多其他的方式。我發現通過CSS規則驗證可以讓你檢查其他領域的字段。這是相當可重用的;表單驗證是網絡上的一項常見任務。一旦你有一個可靠的解決方案，這只是一個應用到你的特定情況的問題。

來源

2013-05-10 01:14:33

jQuery驗證多個表單域

回答

相關問題