javascript - 持续时间文本框验证

Question

我想验证持续时间，它应该是 HH:MM:SS 格式。我应该如何对此进行验证。是否有一些插件可以用于此目的，或者我需要使用 JS 验证。

Time Duration <input type="text" name="time_duration" value="00:00:00"><br>

Answer 1

这是一个非常简单的正则表达式，您可以使用它来验证您的输入为 HH:MM:SS 格式:

^([0-2][0-3]):([0-5][0-9]):([0-5][0-9])$

解释很简单，3 组 2 个字符，由 分隔: 每个字符必须是包含在特定范围内的数字。您可以自定义它以减少限制。

var regexp = new RegExp(/^([0-2][0-3]):([0-5][0-9]):([0-5][0-9])$/)

regexp.test("14:20:05") //  true
regexp.test("14:20:70") //  false (invalid seconds)
regexp.test("25:20:00") //  false (invalid hours) 
regexp.test("14-30-00") //  false (invalid separator)

这里是一个使用 jquery 对模糊事件进行验证的示例(当输入失去焦点时):

$(document).ready(function() {
  
 $('input').blur(function() { 
  var value = $(this).val();
  if (isValidTime(value))
     $(this).css('background','green');
  else
     $(this).css('background','red');
  }) 

function isValidTime(text) {
   var regexp = new RegExp(/^([0-2][0-3]):([0-5][0-9]):([0-5][0-9])$/)
   return regexp.test(text);
}

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 
<input type="text">