0

我正在使用时间验证，我对如何validate使用&& 感到困惑。到目前为止我有这个代码：start_timeend_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。关于如何做到这一点的任何替代方案？谢谢！

4

1 回答 1

0

我认为您使事情复杂化了...考虑关注点分离。在您的逻辑中，您有 2 个主要块，时间字符串的验证和 DOM 操作以提取这些值并打印错误。在您当前的代码中，您对两个字段重复相同的逻辑两次，为什么不将其抽象为一个函数呢？

然后我认为不值得打印多个错误，如果时间无效，然后说“您输入了无效时间”并让用户知道正确的格式，在输入中使用占位符或在通用错误消息中。

如果你遵循这个建议，你可能会大大减少你的代码，并使代码更清晰、更容易理解。这是一个例子，我从这个问题改编了正则表达式：

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

于 2013-09-26T08:40:52.593 回答