如何在阿賈克斯

Question

我有時間的驗證工作使用&&驗證時間，我就如何使用& &到validate這個start_time和end_time困惑。我有這樣的代碼至今：

 var re = /^(\d{1,2}):(\d{2})([ap]m)?$/; 
    //Start Time 
    if($('.start_time').val() != '') { 
       if(regs = $('.start_time').val().match(re)) { 
       if(regs[3]) { 
        // 12-hour value between 1 and 12 
        if(regs[1] < 1 || regs[1] > 12) { 
        $('.start_time_error').html('<div>Invalid value for hour(s)</div>'); 
        $('.start_time').focus(); 
        return false; 
        } 
       } else { 
        if(regs[1] > 12){ 
        $('.start_time_error').html('<div>Invalid value for hour(s)</div>'); 
        return false; 
        } 
       } 
       // minute value between 0 and 59 
       if(regs[2] > 59) { 
        $('.start_time_error').html('<div>Invalid value for minute(s)</div>'); 
        $('.start_time').val().focus(); 
        return false; 
       } 
       } else { 
       $('.start_time_error').html('<div>Invalid time format</div>'); 
       $('.start_time').focus(); 
       return false; 
       } 
       $('.start_time_error').html('<div>Checked</div>'); 
       return true; 
      }else{ 
       $('.start_time_error').html('<div>Please fill up</div>'); 
       return false; 
      } 
      //End time---------- 
       if($('.end_time').val() != '') { 
       if(regs = $('.end_time').val().match(re)) { 
       if(regs[3]) { 
        // 12-hour value between 1 and 12 
        if(regs[1] < 1 || regs[1] > 12) { 
        $('.end_time_error').html('<div>Invalid value for hour(s)</div>'); 
        $('.end_time').focus(); 
        return false; 
        } 
       } else { 
        if(regs[1] > 12){ 
        $('.end_time_error').html('<div>Invalid value for hour(s)</div>'); 
        return false; 
        } 
       } 
       // minute value between 0 and 59 
       if(regs[2] > 59) { 
        $('.end_time_error').html('<div>Invalid value for minute(s)</div>'); 
        $('.end_time').val().focus(); 
        return false; 
       } 
       } else { 
       $('.end_time_error').html('<div>Invalid time format</div>'); 
       $('.end_time').focus(); 
       return false; 
       } 
       $('.end_time_error').html('<div>Checked</div>'); 
       return true; 
      }else{ 
       $('.end_time_error').html('<div>Please fill up</div>'); 
       return false; 
      } 

我想是這樣的：

if(regs = $('.start_time').val().match(re) && regss == $('.end_time').val().match(re)) 

但對我來說它發送和錯誤regss is not defined沒有工作。如何做到這一點的任何選擇？謝謝！

Answer 1

我認爲你會讓事情變得複雜......考慮分離問題。在你的邏輯，你有2個主要模塊，驗證的時間字符串，DOM操作來提取這些值和打印錯誤。在你當前的代碼中，你爲兩個字段重複相同的邏輯兩次，爲什麼不把它抽象成一個函數？

那麼我認爲是不值得打印多個錯誤，如果時間無效，則這樣說：「你輸入了一個無效的時間」，讓用戶知道正確的格式，輸入一個佔位符，或在一般錯誤消息。

如果你遵循這個建議，你可能會減少你的代碼很多，使得更清潔，更容易理解。這裏有一個例子，我適應了正則表達式從this question：

function isTime(str) { 
    return /^([1-9]|1[012]):[0-5][0-9]\s*?(am|pm)$/i.test(str); 
} 

現在，您可以驗證您的輸入，像這樣：

var start = $.trim($('.start_time').val()) 
    , end = $.trim($('.end_time').val()); 

if (!isTime(start) || !isTime(end)) { 
    $('.generic_error').html('<div>Please enter a valid time (HH:MM AM/PM)</div>'); 
} 

不知道你的HMTL但是這應該給出一個整體的想法如何抽象你的代碼讓它變幹（不要重複你自己）。

演示：http://jsbin.com/ayAbUyI/1/edit