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

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

任何关于技术或最佳实践的建议都会很好

谢谢

---

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

你也可以做一些句子创建，让一个简单的英语句子告诉用户什么是错的，但我通常更喜欢列表选项。老实说，有无数种方法可以做到这一点

希望我完全理解了你的问题，如果没有，请告诉我

---

编辑：这里有一个简单的例子，取自您的例子：

一般概念示例。

 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 }
}
});

来源

---

出于好奇，错误中额外的“”有什么意义？只需在第一部分添加空格…Rick，谢谢你的评论。我喜欢使用append的想法，我知道在这个例子中它是不相关的，但是出于性能目的，添加append不只是为了从理论上提高性能吗？请不要用你没有使用的插件来标记这个问题。标签垃圾邮件被删除。瑞克，别介意我知道你从哪里来！谢谢驱逐舰，谢谢，这很有帮助！位破坏者，我使用了您提供的代码，这确实帮助我扩展了jQuery的工作范围。下面的代码对您来说是什么样子的？它是否可用作生产代码和/或概念是否正确<代码>$（“表单”）。在（“提交”上，函数（e）{$（“输入”）。每个（函数（）{if（$（this）.val（）==“”）{var name=$（this）.attr（“name”）；var li=$（“

”，{text:“+name，class:“errorText”，}有一个错误，$（.errorMessage”）。追加（li）；e.preventDefault（）；}else{return true；}}}}；}；Garry，感谢您的快速响应！我对您的示例有点困惑，但不要难过，我还是新手。我将查看您链接到的文档，看看我是否能找到答案！由于您是jquery新手，这可能需要很少的时间，但您可以轻松完成…祝您好运。。。

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 }
}
});