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

自定义jQuery表单验证 - 最好的方法是什么？

2 个答案: