Question

jquery相当新，但我意识到我的代码可能会被浓缩。它工作得很好，但必须有一个更好的方法来做到这一点，因为它看起来像多余的代码。我有两个输入字段和一个我正在验证的textarea，见下文。代码样本将是理想的，因为我还在学习，但任何帮助都是适用的：

$("form#designForm").submit(function(){

    if($("#ccDesignFirstName").val().length == 0){
      alert("Full Name field is required");
      $("#ccDesignFirstName").focus();
      return false;
    }        

    if($(".telephoneInput").is(":visible")){
        if($("#ccDesignTelephone").val().length == 0){
          alert("Phone is required");
          $("#ccDesignTelephone").focus();
          return false;
        }
    }

    if($("#ccDesignProblem").val().length == 0){
      alert("Question is required");
      $("#ccDesignProblem").focus();
      return false;
    }
});

Answer 1

要遍历表单中的所有输入，您可以执行以下操作：

$("form#designForm").submit(function(){
    var valid = true;
    $("form#designForm :input").each(function(){
        //$(this) is the jquery object of the input.
        //do your validation here
        if($(this).val().length == 0){
            valid = false;
        }
        //some more validation if needed...
    });
    return valid;
});

这使用jquery [：input selector] [1]来获取所有类型的输入，如果你只想要文本，你可以这样做：

$("form#designForm input[type=text]")

等

Answer 2

是的，您可以执行一些不同的表单验证策略。我个人最喜欢的是为要验证的元素添加类。

是否需要将所有字段留空？将check-empty类添加到输入中。需要检查电子邮件验证？添加email课程。在JavaScript中，您可以使用单个jQuery选择器并按类别检查每个输入并确保每个检查都通过。

我在这里稍微过了一点，并为每个功能使用了.apply（）。老实说，如果您需要执行异步操作（例如，向服务器发出AJAX请求以确保电子邮件是唯一的），这种技术将无法实现。

如果您需要使用AJAX进行检查，则需要使用回调来确保所有内容都经过验证。一般来说，类似的事情发生一次或两次，所以没有必要过于花哨。如果你确实有一个非常AJAX调用的表单，你可以考虑使用jQuery的$.Deferred。

如果您有任何疑问，请与我们联系。这只是我对表单验证的个人看法，我还有很多方法可以做到这一点。我发现通过CSS规则验证允许您检查其他区域中的字段。这是非常可重复使用的;表单验证是Web上的常见任务。一旦有了可靠的解决方案，只需将其应用于您的特定情况即可。

jQuery验证多个表单字段

2 个答案: