0

私は時間の検証を行っていますが、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。それを行う方法に関する代替案はありますか？ありがとう！

4

1 に答える 1

0

あなたは物事を複雑にしていると思います... 懸念の分離について考えてください。ロジックには、時間文字列の検証と、それらの値を抽出してエラーを出力するための DOM 操作の 2 つのメイン ブロックがあります。現在のコードでは、2 つのフィールドに対して同じロジックを 2 回繰り返していますが、それを関数に抽象化してみませんか?

次に、複数のエラーを出力する価値はないと思います。時間が無効な場合は、「無効な時間を入力しました」などと言って、入力または一般的なエラーメッセージでプレースホルダーを使用して、正しい形式をユーザーに知らせます。

このアドバイスに従えば、おそらくコードを大幅に削減し、よりクリーンで理解しやすいものにすることができます。例を次に示します。この質問から正規表現を適応させました。

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 についてはわかりませんが、コードを抽象化して DRY (Don't Repeat Yourself) にする方法についての全体的なアイデアが得られるはずです。

デモ: http://jsbin.com/ayAbUyI/1/edit

于 2013-09-26T08:40:52.593 に答える