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对blur事件进行验证的示例（当输入失去焦点时）：

＆＃13;

$(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);
}

})

＆＃13;

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

＆＃13;

Answer 2

为什么不使用正确时间值填写的3个选择框而不是文本输入？这样，您就不必验证用户输入，因为您可以强制用户以您的首选格式给出时间。扔一些漂亮的CSS，你有一个非常干净的解决方案。

＆＃13;

<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>

＆＃13;

缺点：你有很多额外的HTML。好处：它需要较少的JavaScript验证来执行此操作，您只需要验证服务器端小时是否在0-23范围内，并且分钟和秒在0-59范围内，以防客户端发送奇怪的信息方式。

持续时间文本框验证

2 个答案: