HTML5输入类型的正则表达式=时间 [英] Regular Expression for HTML5 input type=time

问题描述

我试图找到一个与'time'的输入类型配合使用的正则表达式.我想使用新的HTML5输入type = time，因为此表单大部分将在移动设备上访问，所以如果向用户展示时间选择器，那就太好了.

I am trying to find a regular expression that plays nicely with the input type of 'time'. I want to use the new HTML5 input type=time, because this form will mostly be accessed on a mobile device, so it would be nice if the user was presented with a time picker.

但是，某些浏览器对该输入类型不做任何特殊处理，因此我仍然需要一个正则表达式.

However, some browsers don't do anything special with that input type, so I still require a regular expression.

我已经尝试了以下两个示例:

I've tried both these examples:

验证asp.net中的仅时间输入MVC非侵入式验证

HTML 5的24小时正则表达式

当输入type = text时它们起作用，但是当我将其更改为时间时它们将失败.

They work when the input type=text, however they fail when I change it to time.

谢谢

编辑

正则表达式应使用AM/PM验证时间，但是输入的前导0(03:00 AM)还是无分钟(3am)都没关系.

The regular expression should validate the time with AM/PM, however it doesn't matter if they enter in a leading 0 (03:00AM) or no minutes (3am).

基本上，它只需要使用时间输入即可:

Essentially it just needs to work with a time input:

<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时间选择器时，这将返回无效时间.

This returns invalid time when using the chrome time picker.

推荐答案

好的，因此，根据Armfoot的响应，我决定使用Modernizr来实现跨浏览器时间输入的支持.就像我在问题中提到的那样，出于移动目的，输入类型必须为时间"，因为IMO的时间选择器可以改善用户体验.

Okay, so based on Armfoot's response, I decided to use Modernizr to achieve cross-browser time input support. Like I mentioned in my question, the input type needs to be "time" for mobile purposes, because IMO the time picker improves user experience.

我不确定这是否是最好的方法，但这是我所做的:

I'm not sure if this is the BEST approach, but here is what I did:

这是此特定表单元素的起始HTML:

Here is the starting HTML for this particular form element:

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

初始类型设置为文本"，用于验证时间的正则表达式为:

The initial type is set to "text", and the regular expression for validating the time is:

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

我在问题中发布的链接中使用了相同的表达式，但是我在时间和AM/PM之间以及之后添加了一个"\ s *"，因此与AM之间有多少空格无关紧要/PM，或者如果用户之后不小心添加了空格. 0?还将前导0设为可选.

I used the same expression from the link posted in my question, however I added "\s*" between the time and the AM/PM and also one afterwards, so the it doesn't matter how many spaces go between AM/PM or if the user accidentally adds a space afterwards. The 0? also makes the leading 0 optional.

对于JavaScript，我添加了:

For JavaScript, I added:

//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条件语句检查浏览器是否支持输入类型时间".如果支持，它将类型更改为时间"，并删除data-val-regex属性，因为type ="time"不支持这些属性.

The Modernizr conditional statement checks if the input type "time" is supported by the browser. If it is supported, it changes the type to "time", and removes the data-val-regex attributes since those are NOT supported for type="time".

这似乎在所有浏览器和设备上都能正常工作.我已经在Chrome/Chrome移动版/IE/Firefox/iPad(Safari)上对其进行了测试.时间选择器可以很好地显示在iPad和Nexus设备上，从而使其可以很好地用于移动用途.正则表达式可在无法呈现时间输入的Firefox和IE上正常运行.

This seems to work fine across all browsers and devices. I've tested it on Chrome/Chrome Mobile/IE/Firefox/iPad (Safari). The time pickers show up nicely on the iPad and the Nexus devices making this work well for mobile purposes. The regex works properly on Firefox and IE where the time input doesn't get rendered.

这篇关于HTML5输入类型的正则表达式=时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！