javascript – jQuery Mask插件中的时间验证24h-Format

我正在尝试使用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]/ }
        }
    });
});

这个解决方案不太好,因为我仍然允许用户键入错误的内容.我怎样才能解决这个问题？

解决方法:

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

    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”之前的几个小时添加左零.

我希望这有帮助.

标签：masking,javascript,jquery,validation,time
来源： https://codeday.me/bug/20190727/1555575.html