0

我想创建一个自定义的 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

4

2 回答 2

0

对的，这是可能的。如果你想这样做，你需要决定你想如何准确地显示这些错误。有些人会将每个错误放入一个列表项中，列表前带有某种标题，例如“请更正以下错误：”。然后您将创建一个 li 元素，将其文本设置为错误，并将其附加到您的 ul 列表对象。

您还可以创建某种类型的句子来制作一个简单的英语句子，告诉用户哪里出了问题，但我通常更喜欢列表选项。老实说，有无数种方法可以做到这一点。

希望我能彻底理解你的问题，如果没有，请告诉我。

编辑：这是一个快速而肮脏的示例，取自您的示例：http ://codepen.io/anon/pen/hJdtD

于 2013-02-08T14:51:20.267 回答
0

一般概念示例。

 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

于 2013-02-08T14:55:00.763 回答