自定義jQuery表單驗證 - 什麼是最佳方式？

Question

我想創建一個自定義的jQuery表單驗證腳本來幫助我學習jQuery，並且它是最佳實踐。但是，當我開始的那一刻，我發現自己比解決方案有更多的問題。我知道有jQuery驗證插件和其​​他一些第三方插件，但這是我想從頭開始創建的。

我的第一次嘗試產生如下所示。它工作的很好，但看起來像很多代碼來驗證基本上相同類型的輸入提交一直到形式。

$(".validation").submit(function(){ 
    if($(".name").val() === ""){ 
    $(".name").addClass("error"); 
    $(".errorMessage").html("<p>Error: Please enter a valid name</p>").slideDown(); 
    return false; 
    }if($(".address1").val() === ""){ 
    $(".address1").addClass("error"); 
    $(".errorMessage").html("<p>Error: Please enter a valid address</p>").slideDown(); 
    return false; 
    }if($(".city").val() === ""){ 
    $(".city").addClass("error"); 
    $(".errorMessage").html("<p>Error: Please enter a valid city</p>").slideDown(); 
    return false; 
    }if($(".state").val() === "0"){ 
    $(".state").addClass("error"); 
    $(".errorMessage").html("<p>Error: Please enter a valid state</p>").slideDown(); 
    return false; 
    }if($(".zipCode").val() === ""){ 
    $(".zipCode").addClass("error"); 
    $(".errorMessage").html("<p>Error: Please enter a valid zip code</p>").slideDown(); 
    return false; 
    }if($(".phone").val() === ""){ 
    $(".phone").addClass("error"); 
    $(".errorMessage").html("<p>Error: Please enter a valid phone</p>").slideDown(); 
    return false; 
    }if($(".email").val() === "" || ! /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/.test($(".email").val())){ 
    $(".email").addClass("error"); 
    $(".errorMessage").html("<p>Error: Please enter a valid email</p>").slideDown(); 
    return false; 
    } 
}); 

我的第二次嘗試產生如下所示。這減少了所有的if語句，但是事件冒泡，它正在向後驗證表單。它也一次只在$(".errorMessage").html("There was an error" + " " + name);中添加一條錯誤消息。是否有可能同時顯示每個空表單字段的錯誤消息，而不是每次顯示一個？我有一個CodePen demo這個工作。

$("form").on("submit", function(e){ 
    $("input").each(function(){ 

    var name = $(this).attr("name"); 

    if($(this).val() == ""){ 
     $(".errorMessage").html("There was an error" + " " + name); 
     e.preventDefault(); 
    }else{ 
     return true; 
    } 
    }); 
}); 

任何有關技術或最佳實踐的建議都會很棒。

感謝，

JB

Answer 1

是的，這是可能的。如果你想這樣做，你需要決定你想如何顯示這些錯誤。有些人會將每個錯誤放入列表前的某個標題的列表項中，例如「請更正以下錯誤：」。然後，您將創建一個li元素，將其文本設置爲該錯誤，並將其附加到您的ul列表對象。

你也可以做一些類型的句子創建，使一個簡單的英語句子告訴用戶什麼是錯的，但我通常更喜歡列表選項。老實說，這樣做有無數的方法。

希望我徹底理解你的問題，儘管如此，讓我知道。

編輯：這裏有一個快速和骯髒的例子，從你的榜樣採取：http://codepen.io/anon/pen/hJdtD

Answer 2

一般概念實例。

Adds a validation method that checks if a given value equals the addition of the two parameters. 

jQuery.validator.addMethod("math", function(value, element, params) { 
return this.optional(element) || value == params[0] + params[1]; 
}, jQuery.format("Please enter the correct value for {0} + {1}")); 

自定義方法舉例：

jQuery.validator.addMethod("greaterThanZero", function(value, element) { 
return this.optional(element) || (parseFloat(value) > 0); 
}, "* Amount must be greater than 0"); 

$('validatorElement').validate({ 
rules : { 
    amount : { greaterThanZero : true } 
} 
}); 

來源 http://docs.jquery.com/Plugins/Validation/Validator/addMethod