Question

我正在进行时间验证，并且对于如何validate start_time和end_time使用＆amp;＆amp;而感到困惑。到目前为止我有这个代码：

     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

如何使用＆amp;＆amp;和在ajax

1 个答案: