时间选择器验证? JQuery/Javascript

Timepicker validation? JQuery/Javascript

我使用 timepicker 作为我的开始和结束时间。如果用户输入错误的时间格式,我想对这两个输入字段进行验证。这是我的 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

如果要匹配 ampm 中的时间间隔,时间范围将在 00:0012:59 之间。

因此您的正则表达式将是:

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

勾选online demo

传奇

^                # 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"/>

Update:我修改了正则表达式以丢弃之前接受的一些值,例如奇怪的 0:012:9(取决于单个数字分钟部分),正如 Mic 在评论中所建议的那样。

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