用于 jquery 的 AM PM 时间格式的正则表达式答案

【问题标题】：Regex for AM PM time format for jquery用于 jquery 的 AM PM 时间格式的正则表达式
【发布时间】：2012-02-07 20:58:25
【问题描述】：

我对使用正则表达式来屏蔽输入字段感到沮丧。我想将输入限制为 hh:mm AM|PM 格式，我无法让这个正则表达式工作。

我将此正则表达式与来自www.ThimbleOpenSource.com 的 jquery 工具结合使用。它是 filter_input.js 工具或其他工具。

它似乎适用于一个简单的正则表达式，但我想出的那个似乎不起作用。这是我下面的 jsFiddle 测试链接。

jsFiddle

【问题讨论】：

您的小提琴中的正则表达式只是[a-z]...您认为这是正确的过滤器吗？您是否尝试过使用谷歌搜索时间格式的正则表达式？
问题是你想要什么。这个 filter_input 插件似乎会检查每次击键的输入。但是你不能检查时间格式。如果您想按照描述检查时间格式，您应该检查模糊或提交表单时输入字段的值（例如）。
如果您正确使用 /[0-2][0-9]:[0-1][0-9] AM|PM/ 之类的正则表达式，则用户将在输入框中写入内容该脚本将尝试将他的第一个键盘输入与整个正则表达式匹配。因此，如果您写为第一个键盘输入“2”，脚本将尝试将“2”与 /[0-2][0-9]:[0-1][0-9] AM|PM/ 匹配，但事实并非如此正确的。 filter_input 只能使用简单的正则表达式。
对不起...这是我原来的正则表达式...我这样做是为了看看那个东西是否有效jsfiddle.net/KsvdK/6

标签： javascript jquery regex

【解决方案1】：

首先，如果你将它用于输入字段，你不应该让用户使用文本字段输入日期或时间信息，并希望它是严格的格式。

但是，如果你坚持：

/^(0?[1-9]|1[012])(:[0-5]\d) [APap][mM]$/

此正则表达式将以 AM/PM 格式验证时间。

【讨论】：

这似乎不适用于我拥有的 jsFiddle 函数
好吧，正如@Kakawait 在评论中所写，因为它在按键上运行，它只能用于避免字段中的无效字符，而不是用于有效格式。使用您的函数，您只能指定字符：[0-9:APM ]

【解决方案2】：

我做了一个jsfiddle示例，基于答案von Yuri的正则表达式： http://jsfiddle.net/Evaqk/

$('#test1, #test2').blur(function(){
    var validTime = $(this).val().match(/^(0?[1-9]|1[012])(:[0-5]\d) [APap][mM]$/);
    if (!validTime) {
        $(this).val('').focus().css('background', '#fdd');
    } else {
        $(this).css('background', 'transparent');
    }
});

【讨论】：

【解决方案3】：

你不能用那个插件来做到这一点，因为你需要检查每个字符。

HTML：

<form>
    <p>When?</p>
        <input type="text" id="test1" placeholder="hh:mm(AM|PM)"/>
</form>

JavaScript：

$("#test1").keypress(function(e) {
    var regex = ["[0-2]",
    "[0-4]",
    ":",
    "[0-6]",
    "[0-9]",
    "(A|P)",
    "M"],
    string = $(this).val() + String.fromCharCode(e.which),
    b = true;
    for (var i = 0; i < string.length; i++) {
        if (!new RegExp("^" + regex[i] + "$").test(string[i])) {
            b = false;
        }
    }
    return b;
});

Example

【讨论】：

嘿，我们应该把它变成一个简单的MaskPluggin！

【解决方案4】：

所以我很确定这个问题现在已经解决了，但是我最近一直在努力解决这个问题，并且无法足够快地找到答案。我正在使用 Bootstrap Validator（@nghuuphuoc 的 bootstrapvalidator.com）和 Eonasdan 的 DateTimepicker 来验证一个小时（PS：您可以在 Eonasdan 的插件中禁用日期）。

由于 Bootstrap Validator 还没有时间验证器，因此您必须使用正则表达式。这个非常适合我：

^([0-1]?[0-9]|2[0-3]):[0-5][0-9] [APap][mM]$

【讨论】：

如果您需要上午或下午，那么允许小时 > 12 是没有意义的。
您应该将小时数限制在 12 以上，那么正则表达式将类似于：(0?[1-9]|1[0-2]):[0-5][0-9] ?[APap][mM]$

【解决方案5】：

以下函数返回（真/假）值

    function CheckTime(HtmlInputElement) {
       var dt = HtmlInputElement.value;
       return (/(0?[1-9]|1[0-2]):[0-5][0-9] ?[APap][mM]$/.test(dt));
}

【讨论】：

【解决方案6】：

也检查这个解决方案。

<!DOCTYPE html>
<html>
<body>

<p>This demo used to validate time with 12 hours format</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
    var regexp = /^(0?[1-9]|1[012])(:[0-5]\d) [APap][mM]$/;
    var res = regexp.test('12:00 AM'); //try with alphabets or wrong format
    document.getElementById("demo").innerHTML = res;
}
</script>

</body>
</html>

【讨论】：