Question

我正在尝试找到一个与'time'的输入类型很好地匹配的正则表达式。我想使用新的HTML5输入类型=时间，因为这个表单主要是在移动设备上访问的，所以如果向用户提供时间选择器会很好。

但是，某些浏览器对该输入类型没有做任何特殊操作，因此我仍然需要正则表达式。

我试过这两个例子：

Validating time-only input in asp.net MVC unobtrusive validation

24 hour time regex for HTML 5

当输入类型=文本时它们工作，但是当我将其更改为时间时它们会失败。

谢谢

修改

正则表达式应该使用AM / PM验证时间，但是如果它们输入前导0（上午03:00）或没有时间（上午3点），则无关紧要。

基本上它只需要处理时间输入：

<input data-val="true" data-val-regex="Invalid Time." data-val-regex-pattern="^(0[1-9]|1[0-2]):[0-5][0-9] (am|pm|AM|PM)$" name="StartTime" type="time" value="" />

使用Chrome时间选择器时返回无效时间。

Answer 1

我有好消息和坏消息......

糟糕的是，您无法使用input types different from text, search, url, tel, email, and password中的pattern属性。

虽然这是有效的：

 <input type="text" pattern="([01]?[0-9]{1}|2[0-3]{1}):[0-5]{1}[0-9]{1}"/>

这不会是：

<input type="time" pattern="([01]?[0-9]{1}|2[0-3]{1}):[0-5]{1}[0-9]{1}"/>

好消息是您可能不需要在type=time中使用任何模式，因为它已经has a pattern of its own：

type = time（HH：MM）
- 时间值，没有24小时军事格式的时区。

修改

我注意到您使用以下代码进行编辑：

<input data-val="true"
 data-val-regex="Invalid Time."
 data-val-regex-pattern="^(0[1-9]|1[0-2]):[0-5][0-9] (am|pm|AM|PM)$"
 name="StartTime" type="time" value="" />

我还注意到有人使用those data attributes，他们仍然使用type="text"。我认为这就是为什么它在使用chrome time picker＆＃34;时会返回无效时间的原因。

我还没有找到type="time"与其他模式一起工作的情况（即使使用data-），似乎这个答案已经解释过了： html5 time inputs shows 12 hours

如果您确实需要AM和PM，可以尝试使用正则表达式模式type="text"并通过Javascript触发日期选择器。

Answer 2

好的，基于Armfoot的回应，我决定使用Modernizr来实现跨浏览器的时间输入支持。就像我在我的问题中提到的那样，输入类型需要是“时间”用于移动目的，因为IMO时间选择器可以改善用户体验。

我不确定这是不是最好的方法，但这就是我所做的：

以下是此特定表单元素的起始HTML：

<div class="form-group">
    <label for="StartTime">Time Started</label>
    <input class="form-control" type="text" data-type="time" data-val="true" data-val-regex="Time is invalid" data-val-regex-pattern="^(0?[1-9]|1[0-2]):[0-5][0-9]\s*[aApP][mM]\s*$" data-val-required="Start time is required" id="StartTime" name="StartTime" placeholder="Time Started"  value="" />
    <span class="field-validation-valid" data-valmsg-for="StartTime" data-valmsg-replace="true"></span>
</div>

初始类型设置为“text”，用于验证时间的正则表达式为：

^(0?[1-9]|1[0-2]):[0-5][0-9]\s*[aApP][mM]\s*$

我在我的问题中发布的链接中使用了相同的表达式，但是我在时间和AM / PM之间添加了“\ s *”，之后又增加了一个，所以在AM之间有多少空格无关紧要/ PM或者如果用户意外添加了空格。 0？也使前导0可选。

对于JavaScript，我补充道：

//detect if time input is supported
if (Modernizr.inputtypes.time) {
    $('*[data-type="time"]').attr('type', 'time');
    $('*[data-type="time"]').removeAttr('data-val-regex');
    $('*[data-type="time"]').removeAttr('data-val-regex-pattern');
}

Modernizr条件语句检查浏览器是否支持输入类型“time”。如果支持，则将类型更改为“time”，并删除data-val-regex属性，因为type =“time”不支持这些属性。

这似乎适用于所有浏览器和设备。我在Chrome / Chrome Mobile / IE / Firefox / iPad（Safari）上测试过它。时间选择器很好地显示在iPad和Nexus设备上，使其适用于移动目的。正则表达式适用于Firefox和IE，其中时间输入无法呈现。

HTML5输入类型的正则表达式=时间

2 个答案:

修改