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