jQuery Mask 插件中的时间验证 24 小时格式答案

【问题标题】：Time validation 24h-Format in jQuery Mask PluginjQuery Mask 插件中的时间验证 24 小时格式
【发布时间】：2016-03-22 10:03:01
【问题描述】：

我正在尝试使用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 格式。该模式似乎只适用于一个符号。我怎样才能将它用于更多字符？像这样([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]/ }
        }
    });
});

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

【问题讨论】：

标签： javascript jquery validation time masking

【解决方案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”之前的几个小时添加左零。

我希望这会有所帮助。

【讨论】：

【解决方案2】：

                    var maskBehavior = function (val) {
                        val = val.split(":");
                        return (parseInt(val[0]) > 19) ? "HZ:M0" : "H0:M0";
                    },spOptions = {
                        onKeyPress: function (val, e, field, options) {
                            if (val.length == 1 && parseInt(val) > 2) {
                                val = pad$(val, 2);
                                arguments[0] = val;
                                field.val(val);
                            } else if (val.length > 3) {
                                val = val.split(":");
                                if (parseInt(val[1]) > 5) {
                                    val = val[0] + ':' + pad$(val[1], 2);
                                    arguments[0] = val;
                                    field.val(val);
                                };
                            };
                            field.mask(maskBehavior.apply({}, arguments), options);
                        },
                        translation: {
                            'H': { pattern: /[0-9]/, optional: false },
                            'Z': { pattern: /[0-3]/, optional: false },
                            'M': { pattern: /[0-9]/, optional: false }
                        }
                    };

【讨论】：