Javascript регулярного выражения маска ввода времени - без плагина

Question

Я не могу использовать плагин маски ввода и пытаюсь создать маску ввода времени hh: mm с меридианом am|pm. Например, ввод не должен позволять пользователю начинать с альфы... но созданный мною шаблон (который, я думаю, можно было бы упростить) очистит все значение, если шаблон не совсем совпадает. Эта маска должна проверяться при каждом нажатии клавиши (или вводе в этом случае), поэтому следует разрешить следующее:

0
02
02:
02: 3
2: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/

Answer 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);
        };

    });

хотя это не так динамично, как хотелось бы.

Answer 2

Попробуйте регулярное выражение: ^\d(?:\d(?::(?:\d(?:\d(?:\s(?:(?:a|p)(?:m)?)?)??)?)?)?)?$

демонстрация