时间选择器验证?JQuery/Javascript

Timepicker validation? JQuery/Javascript

本文关键字：Javascript JQuery 选择器 验证 时间      更新时间：2023-09-26

我使用时间选择器作为开始和结束时间。我想对这两个输入字段进行验证，以防用户输入错误的时间格式。这是我的HTML代码：

<th>Start Time:</th>
<td>
   <input type="text" id="stime" name="stime" maxlength="10"/>
</td>
<th>End Time:</th>
<td>
   <input type="text" id="etime" name="etime" maxlength="10"/>
</td>

这是我的JavaScript验证代码：

var sTime = $('#stime').val();
var eTime = $('#etime').val();
var regExp = /^(([0-1]?[0-9])|([2][0-3])):([0-5]?[0-9])(:([0-5]?[0-9]))?$/i
if(regExp.test(sTime) == false){
    alert('Start Time is wrong');
}else if(regExp.test(eTime) == false){
    alert('End Time is wrong');
}

我的代码不起作用，如果我在时间选择器中选择了正确的时间格式，我会收到时间错误的警报。如果有人能帮我解决这个问题，请告诉我。我的时间值如下：

start time: 08:00 am 
end time: 01:15 pm

如果要匹配在am和pm中划分的时间间隔，则时间范围将在00:00和12:59之间。

所以你的正则表达式是：

^(?:(?:0?'d|1[0-2]):[0-5]'d)$

查看在线演示

Legenda

^                # Start of the string
 (?:             # NCG1
   (?:           # NCG2
     0?'d        # An optional zero followed by a single number between zero and nine 'd is just like [0-9]
       |         # OR
       1[0-2]    # A literal '1' followed by a single number between zero and two
    )            # CLOSE NCG2
    :            # A literal colon ':'
    [0-5]'d      # A single number from 0 to 5 followed by any digit
  )              # CLOSE NCG1
$                # End of the string

Js演示

var re = /^(?:(?:0?'d|1[0-2]):[0-5]'d)$/;
var tests = ['08:00','01:15','1:14','02:23','23:23','12:01','13:05','3:04','5:65','0:0','12:9','0:34','0:01','00:31','0:00','00:00'];
var m;
while(t = tests.pop()) {
    document.getElementById("r").innerHTML += '"' + t + '"<br/>';
    document.getElementById("r").innerHTML += 'Valid time? ' + ( (t.match(re)) ? '<font color="green">YES</font>' : '<font color="red">NO</font>') + '<br/><br/>';
}
    
<div id="r"/>

更新：我修改了正则表达式，丢弃了之前接受的一些值，比如奇怪的0:0或12:9（取决于个位数的分钟部分），正如Mic在评论中建议的那样。

但是正则表达式继续匹配午夜00:xx和中午12:xx之后的分钟。在意大利的数字钟中，这只是用来区分天顶和天底的方法（我不能确定它是否被普遍接受，但我认为这是一个合理的默认值）。

相关文章：