javascript - jQuery Mask 插件中的时间验证 24 小时格式

Question

我正在尝试使用 jQuery Mask Plugin by Igor Escobar时间验证:

$("input").mask("Hh:Mm",{
    translation: {
      'H': { pattern: /[0-2]/ },
      'h': { pattern: /[0-9]/ },
      'M': { pattern: /[0-5]/ },
      'm': { pattern: /[0-9]/ }
    }
});

在此解决方案中，可以输入无效时间，如 26:53。我也不能使用 am 或 pm，只能使用 24h 格式。该模式似乎只适用于一个符号。我怎样才能将它用于更多 Angular 色？像这样 ([01]?[0-9]|2[0-3])

我也尝试在输入后验证值:

$("input").each(function() {
    el = $(this);
    el.mask("Hh:Mm", {
        onComplete: function(cep) {
            if (!/^([01]?[0-9]|2[0-3]):[0-5][0-9]$/.test(cep)) {
                alert('Error');
                el.attr("value","");
            }
        },
        translation: {
            'H': { pattern: /[0-2]/ },
            'h': { pattern: /[0-9]/ },
            'M': { pattern: /[0-5]/ },
            'm': { pattern: /[0-9]/ }
        }
    });
});

这个解决方案不是很好，因为我仍然允许用户输入错误的内容。我该如何解决这个问题？

Answer 1

我找到了使用函数掩码解决这个问题的方法

    var maskBehavior = function (val) {
        val = val.split(":");
        return (parseInt(val[0]) > 19)? "HZ:M0" : "H0:M0";
    }

    spOptions = {
        onKeyPress: function(val, e, field, options) {
            field.mask(maskBehavior.apply({}, arguments), options);
        },
        translation: {
            'H': { pattern: /[0-2]/, optional: false },
            'Z': { pattern: /[0-3]/, optional: false },
            'M': { pattern: /[0-5]/, optional: false}
        }
    };

    $('.daytimemask').mask(maskBehavior, spOptions);

这似乎工作正常，但有必要在“12”之前的几个小时添加左边的零。

希望对您有所帮助。