優化如果jQuery的其他條件

Question

$(document).ready(function(){ 
    $("#submit").click(function(){ 

     var userinput = $('#username').val(); 
     var mobilenumber=$('#mobnum').val(); 
     var address1=$('#addr1').val(); 
     var address2=$('#addr2').val(); 

     var characterReg = /^([a-zA-Z]{2,30})$/; 
     var numericReg=/^\d*[0-9](|.\d*[0-9]|,\d*[0-9])?$/; 
     var emailReg=/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; 
     var addrReg = /^\s*[a-zA-Z0-9,\s]+\s*$/; 

     var errors=false; 

     if(!characterReg.test(userinput)){ 
      $('#username').addClass('box'); 
      $('.alert').show(); 
      errors=true; 
     }else{ 
      $('#username').removeClass('box'); 
      $('.alert').hide(); 
     } 
     if(!numericReg.test(mobilenumber)){ 
      $('#mobnum').addClass('box'); 
      $('.alert').show(); 
      errors=true; 
     }else{ 
      $('#mobnum').removeClass('box'); 
      $('.alert').hide(); 
     } 
     if($('#mail').val()==''){ 
      $('#mail').addClass('box'); 
      $('.alert').show(); 
      errors=true; 
     }else{ 
      $('#mail').removeClass('box'); 
      $('.alert').hide(); 
     } 
     if($('#pwd').val()==''){ 
      $('#pwd').addClass('box'); 
      $('.alert').show(); 
      errors=true;  
     }else{ 
      $('#pwd').removeClass('box'); 
      $('.alert').hide(); 
     } 
     if(!addrReg.test(address1)){ 
      $('#addr1').addClass('box'); 
      $('.alert').show(); 
      errors=true; 
     }else{ 
      $('#addr1').removeClass('box'); 
      $('.alert').hide(); 
     } 
     if(!characterReg.test(address2)){ 
      $('#addr2').addClass('box'); 
      $('.alert').show(); 
      errors=true;  
     }else{ 
      $('#addr2').removeClass('box'); 
      $('.alert').hide(); 
     } 
     if(errors){ 
      return false; 
     }else{ 
      return true; 
     } 
    }); }); 

您好所有...我前2天發佈的這個問題，但我不力得到任何解決方案....請誰能幫助我......如何優化這個代碼..我試着用開關的情況下，但我無法得到正確的輸出...我不知道如何處理每個循環的多個ID ...有沒有其他方式來優化此代碼？

Answer 1

您可以創建一個驗證函數，該函數接受用於驗證的元素和正則表達式格式。

此外，您還可以使用toggle()代替show()/hide()和toggleClass()而不是addClass()/removeClass()

function validate(element, regex) 
{ 
    var errors = !regex.test($(element).val() || $(element).val()=='') 
    $(element).toggleClass('box',errors); 
    $('.alert').toggle(errors) 
} 

或與您的方法，

function validate(element, regex) 
{ 
    if(!regex.test($(element).val()) || $(element).val()=='') 
    { 
     $(element).addClass('box'); 
     $('.alert').show(); 
     errors=true; 
    }else{ 
     $(element).removeClass('box'); 
     $('.alert').hide(); 
    } 

return error; 
} 

和按如下方式使用它，

validate('#username', '/^([a-zA-Z]{2,30})$/'); 
validate('#mobnum', '/^\d*[0-9](|.\d*[0-9]|,\d*[0-9])?$/');