jQuery验证多个表单域

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

$("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; 
    } 
});

来源

2013-05-09 Delmon Young

确实是多余的。你应该看看函数，数组和循环，所以基本上学习Javascript。 jQuery只不过是一个帮助DOM和Ajax的工具。 – kapa 2013-05-09 22:03:27

要通过所有输入的形式循环，你可以这样做：

$("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 [ ：输入选择] [1]来获得所有类型的输入，如果你只是想文本可以这样做：

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

等

来源

2013-05-09 22:47:50 Waqleh

感谢您的回复@Waleed Akleh我有点困惑你为什么有有效的变量。另外说我想瞄准一个特定的领域。例如，我希望是电话号码的另一种验证类型。我将如何去做这件事 – 2013-05-10 13:58:33

是的，你可以做几种不同的表单验证策略。我个人最喜欢的是将类添加到要验证的元素。

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

我在这里做了一些小事，并为每个函数使用了.apply（）。诚实地说，如果你需要做一些异步的事情（比如AJAX请求到服务器以确保电子邮件是唯一的），这种技术不会成功。

如果您需要使用AJAX进行检查，则需要使用回调来确保所有的验证。一般来说，类似的事情会发生一次或两次，所以不需要太过花哨。如果你的表单非常AJAX，那么你可以考虑使用jQuery的$.Deferred。

让我知道如果您有任何问题。这仅仅是我对表单验证的个人看法，我还有很多其他的方式。我发现通过CSS规则验证可以让你检查其他领域的字段。这是相当可重用的;表单验证是网络上的一项常见任务。一旦你有一个可靠的解决方案，这只是一个应用到你的特定情况的问题。

来源

2013-05-10 01:14:33

jQuery验证多个表单域

回答

相关问题