jquery - 通过数组表单验证检查字段

Question

我从 jQuery 开始，尝试在表单验证中节省大量代码。我想将所有表单字段放在一个数组中，使用each()循环遍历数组以查看字段是否为空并返回错误(如果需要)。

一个问题；我的方法不起作用..

我使用以下方法

     var fields = [ "$('#name')", "$('address')" ];
     jQuery.each(fields,function(){
      if(this.val() == ""){
       alert(this.id+" is empty");
       return false;
      }
     });

当然，我可以单独检查所有字段，但是因为我有很多表单，所以这将是一个相当大的代码。

我的想法是否可能？如果可能，如何实现？

好的，上面的问题已经完美解决，但是我现在有了新的问题

一旦我检查了所有字段是否为空，我想检查是否输入了有效的电子邮件。我使用以下代码:

    $("#reservationForm").live("submit", function(f){
     $(".formError").hide();
     if(!$('#agree').is(':checked')){
      $("#agree").after('You need to agree with the terms on the right');
      f.preventDefault();
     }else{
      $("#reservationForm").find("input[type=email], input[type=tel], input[type=text]").filter(function(){
       if($(this).val() == ""){
        $(this).css("border","solid 1px red").after('Please fill in your '+this.id+'');
        $(this).find("first-child").focus();
        f.preventDefault();
       }else if(!/\b[A-Z0-9._%+-]+@(?:[A-Z0-9-]+\.)+[A-Z]{2,4}\b/.test($("#mail").val())){
        $("#mail").css("border","solid 1px red").after('Please enter a valid email address');
       }
      });
     }
    });

问题是边框没有变成红色，并且电子邮件字段后面应该显示的消息没有显示。仅关注电子邮件字段，没有其他字段。

哦，实际上我还有另一个“问题”，因为第一个子选择器似乎不起作用。焦点不是第一个元素，而是最后一个元素。 (我也尝试过最后一个 child ，但这并没有成功..)

Answer 1

删除数组中的 '"'。您希望存储对元素的引用，而不是字符串;-)

另外，请看一下:

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

这是一个很棒且易于使用的 jQuery 表单插件!哦，你可能想将 .val() 更改为 .attr("value") (虽然 val 可能有效，但我不确定)

哦，如果这仍然不起作用，请尝试 $(this) 而不是仅使用 this，而不是 100% jQuery 通过 $(this) 处理此问题的方式