時間長度文本框驗證

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

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範圍內，以防客戶端發送奇怪的信息你的方式。