持续时间文本框验证

Question

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

​

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

​

Answer 1

这是一个非常简单的regexp，您可以使用它来验证输入为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">

​

Answer 2

为什么不使用用正确的时间值填写的3个复选框来代替文本输入呢？这样，您就根本不需要验证用户输入，因为您可以强制用户以您喜欢的格式给出时间。扔一些不错的CSS在它和你有一个非常干净的解决方案。

​

<label>Hours</label>
<select name="hours">
  <option value="0">0</option>
  //repeat 23 more times
</select>
<label>Minutes</label>
<select name="minutes">
  <option value="0">0</option>
  <option value="1">1</option>
  //repeat 59 more times
</select>
<label>Seconds</label>
<select name="seconds">
  <option value="1">1</option>
  //repeat 59 more times
</select>

​

缺点是:你有很多额外的HTML。好处是:这样做需要更少的JavaScript验证，您只需要验证服务器端的小时数在0-23范围内，分钟和秒在0-59范围内，以防客户端以您的方式发送奇怪的信息。