自定义jQuery表单验证-什么是最佳方式

Custom jQuery Form Validation - What Is The Best Way?

本文关键字：最佳 方式 什么 jQuery 表单 验证 自定义      更新时间：2023-09-26

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

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

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

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

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

一般概念示例

 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

相关文章：