自定义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演示此工作。

$("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列表对象中。

您还可以执行某种类型的句子创建操作，以使普通英语句子告诉用户出了什么问题，但是我通常更喜欢使用list选项。 老实说，有无数种方法可以做到这一点。

希望我能完全理解您的问题，如果没有，请告诉我。

编辑：这是一个快速而肮脏的示例，摘自您的示例： 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