在HTML時間輸入中實現一個範圍

Question

我被要求幫助修復一個主要是python（運行Flask）的Web應用程序中的錯誤，這是我知道的，也是我提供幫助的原因。但是，我的HTML知識非常糟糕，我需要幫助。我已經修復了python代碼中的錯誤，但我想確保用戶找不到更多的方式來破壞應用程序。它與用戶輸入交易時間的HTML格式有關。輸入爲文本格式，佔位符'hh：mm：ss'，但不會阻止他們輸入除該格式以外的其他所有內容。如果我從一開始就這樣做了，我會將這個字段設爲'時間'格式，但是現在太多事情取決於它是一個文本字段，我現在寧願在該文本輸入字段上設置一些驗證。

的一段代碼是：

<input type="text" name="time_left" id="time_left" placeholder="hh:mm:ss"> 

的唯一限制是，該時間不能小於00:00:00，它不能超過01:30:00。我很想在這裏放一個min/max屬性，但我懷疑這很簡單。特別是它是文本。

誰能告訴我，我可以做什麼（越簡單越好，就像我說的，我不是很好用HTML）

Answer 1

對於HTML5唯一的解決辦法，有兩種方法。一個是使其成爲type="time"輸入。它的價值仍然可以用input.value作爲一個字符串來閱讀，如果這是你的任何問題。

<input type="time" min="00:00:00" max="01:30:00"> 

瀏覽器將允許steps of 1 minute。如果您需要第二個精度，請添加一個step="1"。

另一個解決辦法是添加pattern屬性：

<input type="text" pattern="0(1:30:00|1:[012][0-9]:[0-5][0-9]|0:[0-5][0-9]:[0-5][0-9])"> 

這兩種解決方案是可行的，每個人都有其優點和缺點。

後者將具有更好的瀏覽器支持，但爲了支持接近100％，您將以任一方式需要從瀏覽器接管的JS庫。我寫了Hyperform，這樣做（和更多），但如果它只是這一個領域，你可能會更好的寫自己的事件處理程序，並將其附加到該輸入字段的change事件。

編輯：在pattern屬性的正則表達式將區分由|分隔的幾個例。第一個也是最簡單的是最長時間01:30:00。接下來是從01:00到01:29:59的時間，最後是從00:00到00:59:59的時間。