在 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。我很想在这里某个地方放一个最小/最大属性，但我怀疑它是否那么简单。特别是它是文本。

谁能告诉我我能做什么（越简单越好，正如我所说，我不太擅长 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 的时间。