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

Question

我目前在一个表单中有很多 type=number 输入字段，带有最小和最大验证。如果用户在 6 位最大数字字段中输入的数字超过 6 位，输入字段将显示错误消息。

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

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

Answer 1

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

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 这对于您正在尝试做的事情非常方便。