如何在阿贾克斯

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