用逗号格式化输入类型=数字字段,并添加最小最大验证

时间:2019-05-07 21:17:00

标签: angularjs html5

我目前有很多具有最小和最大验证形式的type = number输入字段。如果用户在6位最大数字字段中输入6位以上的数字,则输入字段将显示一条错误消息。

但是现在我有这个要求用逗号格式化数字。我知道您不能在type = number输入字段中输入逗号。如果我将其设置为文本字段并添加指令以设置字符串格式,那么现在该值将变为字符串,并且无法执行最小/最大验证,并且该值将存储为字符串而不是数字。

我需要帮助弄清楚如何用逗号格式化数字,以及添加最小/最大验证并将其存储为数字而不是字符串。

1 个答案:

答案 0 :(得分:0)

您可以使用限制字符数的指令来获得所需的结果。

myApp.directive("limitTo", [function() {
    return {
        restrict: "A",
            link: function(scope, elem, attrs) {
            var limit = parseInt(attrs.limitTo);
            angular.element(elem).on("keypress", function(e) {
                var char = String.fromCharCode(e.which);
                if (e.which != 8 && e.which != 0) {
                    if (char < '0' || char > '9') {
                        e.preventDefault();
                    }
                    else if (this.value.length == limit) {
                        e.preventDefault();
                    }
                }
            });
        }
    }
}]);

然后您的输入字段将如下所示:

<input type="number" limit-to="6">

这不完全格式化输入,但是它排除了某些字符无法通过字符代码输入的情况。通过基于字符代码向if语句添加更多条件,可以允许在输入中添加逗号。如果要格式化此格式,那么我建议使用ng-pattern和正则表达式来获取所需的确切格式。

最后,我建议使用angularjs表单验证。 https://docs.angularjs.org/guide/forms 正是您要尝试做的非常方便。