Javascript 正则表达式时间输入掩码 - 无插件答案

【问题标题】：Javascript regex time input mask - no pluginJavascript 正则表达式时间输入掩码 - 无插件
【发布时间】：2019-02-21 15:16:54
【问题描述】：

我无法使用输入掩码插件，我正在尝试使用 am|pm 的子午线创建 hh:mm 的时间输入掩码。例如，输入不应允许用户以 alpha 开头......但是如果模式不完全匹配，我创建的模式（我想可以简化）将清除整个值。此掩码应在每个按键（或本例中的输入）上验证，因此应允许以下内容：

0
02
02：
02:3
02:35
02:35 一
凌晨 02:35

$('.time').on('input', function (e) {
    var input = $(this);
    var value = input.val();
    var pattern = /^(?!(^\d$)|(^\d\d$)|(^\d\d:$)|(^\d\d:\d$)|(^\d\d:\d\d$)|(^\d\d:\d\d\s$)|(^\d\d:\d\d\s(a|p)$)|(^\d\d:\d\d\s(am|pm)$)$).*/g;
    var newvalue = value.replace(pattern, '');
    input.val(newvalue);
});

https://jsfiddle.net/ouk9mzad/

【问题讨论】：

标签： javascript jquery regex input-mask

【解决方案1】：

我最终使用了：

$(selector).on('keypress', function (e) {

        var input = $(this);
        var value = input.val();
        var length = value.length + 1;
        var key = e.originalEvent.key;

        value += key;

        try {

            var pattern = '';

            if (length == 1 && value > 1) {
                e.preventDefault();
                return;
            };

            if (length == 1) pattern = /\d/gi;
            else if (length == 2) pattern = /\d{2}/gi;
            else if (length == 3) pattern = /\d{2}:/gi;
            else if (length == 4) pattern = /\d{2}:\d/gi;
            else if (length == 5) pattern = /\d{2}:\d{2}/gi;
            else if (length == 6) pattern = /\d{2}:\d{2}\s/gi;
            else if (length == 7) pattern = /\d{2}:\d{2}\s(a|p)/gi;
            else if (length == 8) pattern = /\d{2}:\d{2}\s(a|p)m/gi;

            if (pattern == '') {
                e.preventDefault();
                return;
            };

            var ok = pattern.test(value);

            if (!ok) e.preventDefault();

        } catch (e) {
            HandleErrorMessages(e);
        };

    });

虽然它不像我想要的那样充满活力。

【讨论】：

可能有一个模式数组，并且您要使用的模式的索引与长度变量匹配？类似 var patterns = ['', /\d/gi, /\d{2}/gi,/\d{2}:/gi] 等等。那应该清除一些代码。

【解决方案2】：

试试正则表达式：^\d(?:\d(?::(?:\d(?:\d(?:\s(?:(?:a|p)(?:m)?)?)??)?)?)?)?$

Demo

【讨论】：