jQuery使用循环进行验证？

Question

我有相当大的形式，并与PHP验证（ofc）我想使用jQuery。我是jQuery的新手，但环顾四周后，我的代码运行良好。它正在检查文本框的长度，如果长度不足，将不允许提交。如果条目较低，则文本框的颜色将更改为红色。

我遇到的问题是因为表单太大，需要很长时间，并且需要很多代码来验证每个盒子。因此我想知道是否有一种方法可以循环使用所有变量，而不是每次都创建一个函数。

以下是我有：

var form = $("#frmReferral"); 
var companyname = $("#frm_companyName"); 
var companynameInfo = $("#companyNameInfo"); 
var hrmanagername = $("#frm_hrManager"); 
var hrmanagernameInfo = $("#hrManagerInfo"); 

form.submit(function(){ 
    if(validateCompanyName() & validateHrmanagerName()) 
     return true 
    else 
     return false; 
}); 

确认功能

function validateCompanyName(){ 
    // NOT valid 
    if(companyname.val().length < 4){ 
     companyname.removeClass("complete"); 
     companyname.addClass("error"); 
     companynameInfo.text("Too Short. Please Enter Full Company Name."); 
     companynameInfo.removeClass("complete"); 
     companynameInfo.addClass("error"); 
     return false; 
    } 
    //valid 
    else{ 
     companyname.removeClass("error"); 
     companyname.addClass("complete"); 
     companynameInfo.text("Valid"); 
     companynameInfo.removeClass("error"); 
     companynameInfo.addClass("complete"); 
     return true; 
    } 
} 

function validateHrmanagerName(){ 
    // NOT Valid 
    if(hrmanagername.val().length < 4){ 
     hrmanagername.removeClass("complete"); 
     hrmanagername.addClass("error"); 
     hrmanagernameInfo.text("Too Short. Please Enter Full Name."); 
     hrmanagernameInfo.removeClass("complete"); 
     hrmanagernameInfo.addClass("error"); 
     return false; 
    } 
    //valid 
    else{ 
     hrmanagername.removeClass("error"); 
     hrmanagername.addClass("complete"); 
     hrmanagernameInfo.text("Valid"); 
     hrmanagernameInfo.removeClass("error"); 
     hrmanagernameInfo.addClass("complete"); 
     return true; 
    } 
} 

正如你可以看到这将是越来越庞大的50岁以上的输入框。我想也许一个循环会工作，但不知道该怎么办。可能包含所有变量的数组？任何帮助都会很棒。

Answer 1

你可以通过一个选择器为他们提供所有jQuery使用的类。然后使用您的验证功能循环并处理每个案例。

$(".validate").each(//do stuff); 

Answer 2

form.submit(function(){ 
     if(validateCompanyName() && validateHrmanagerName()) // Its logical AND not bitwise 
      return true 
     else 
      return false; 

You can do this. 

var x = $("input[name^='test-form']").toArray(); 

for(var i = 0; i < x.length; i++){ 
    validateCompanyName(x[i]); 
validateHrmanagerName(x[i]); 
} 

Answer 3

这是我会做什么，是如何的jQuery插件验证工作的简化版本。

不是通过id选择单个输入，而是在此情况下附加属性data-validation以指示要验证哪些字段。

<form id='frmReferral'> 
    <input type='text' name='company_name' data-validation='required' data-min-length='4'> 
    <input type='text' name='company_info' data-validation='required' data-min-length='4'> 
    <input type='text' name='hr_manager' data-validation='required' data-min-length='4'> 
    <input type='text' name='hr_manager_info' data-validation='required' data-min-length='4'> 
    <button type='submit'>Submit</button> 
</form> 

然后你写一个小的jQuery插件赶上通过$form.find('[data-validation]')选择的所有要素提交事件的形式，循环和执行一个通用的合格/他们无法通过验证功能。下面是什么插件可能看起来像一个快速的版本：

$.fn.validate = function() { 
    function pass($input) { 
    $input.removeClass("error"); 
    $input.addClass("complete"); 
    $input.next('.error, .complete').remove(); 
    $input.after($('<p>', { 
     class: 'complete', 
     text: 'Valid' 
    })); 
    } 

    function fail($input) { 
    var formattedFieldName = $input.attr('name').split('_').join(' '); 
    $input.removeClass("complete"); 
    $input.addClass("error"); 
    $input.next('.error, .complete').remove(); 
    $input.after($('<p>', { 
     class: 'error', 
     text: 'Too Short, Please Enter ' + formattedFieldName + '.' 
    })); 
    } 

    function validateRequired($input) { 
    var minLength = $input.data('min-length') || 1; 
    return $input.val().length >= minLength; 
    } 

    return $(this).each(function(i, form) { 
    var $form = $(form); 
    var inputs = $form.find('[data-validation]'); 
    $form.submit(function(e) { 
     inputs.each(function(i, input) { 
     var $input = $(input); 
     var validation = $input.data('validation'); 
     if (validation == 'required') { 
      if (validateRequired($input)) { 
      pass($input); 
      } 
      else { 
      fail($input); 
      e.preventDefault(); 
      } 
     } 
     }) 
    }); 
    }); 
} 

然后调用类的插件：

$(function() { 
    $('#frmReferral').validate(); 
});