javascript - angularjs 指令仅接受给定范围内的输入数字

Question

嗨，我正在用 angularjs 开发 Web 应用程序。我需要验证文本框。它应该只接受最多 10 位数字。我有指令，但当前指令不应限制输入的位数。

myapp.directive('validNumber', function () {
    return {
        require: '?ngModel',
        link: function (scope, element, attrs, ngModelCtrl) {
            if (!ngModelCtrl) {
                return;
            }
            ngModelCtrl.$parsers.push(function (val) {
                if (angular.isUndefined(val)) {
                    var val = '';
                }
                var clean = val.replace(/[^0-9]+/g, '');
                if (val !== clean) {
                    ngModelCtrl.$setViewValue(clean);
                    ngModelCtrl.$render();
                }
                return clean;
            });
            element.bind('keypress', function (event) {
                if (event.keyCode === 32) {
                    event.preventDefault();
                }
            });
        }
    };
});
       <div class="inputblock" ng-class="{ 'has-error' : ((form1.$submitted && form1.idnumber.$invalid )|| (form1.idnumber.$invalid && form1.idnumber.$dirty))}">
                                <label class="inputblock-label" ng-show="idnumber">{{ 'ID Number' | translate }}</label>
                                <span class="ang-error" style="color:#fff" ng-show="form1.idnumber.$dirty && form1.idnumber.$invalid ">
                                    <span ng-show="form1.idnumber.$invalid && form1.idnumber.$dirty">*{{'Max allowed digits 10' | translate}}</span>
                                </span>

                                <input class="with-icon" type="text" name="idnumber" placeholder="{{ 'ID Number' | translate }}" ng-model="idnumber" required ng-pattern="/^[0-9]{1,7}$/" > <!--valid-number-->
                            </div>

我可以知道上述指令中应该更改什么，以便它最多只能接受 10 位数字!任何帮助，将不胜感激。谢谢。

Answer 1

使用下面的代码并尝试。我这段代码的最初目的是将数字限制为整数。但我对其进行了一些修改，以便您可以使用它

(function() {
'use strict';

angular.module('app').directive('intValidate', intValidate);

function intValidate($locale) {

    var decimalSep = $locale.NUMBER_FORMATS.DECIMAL_SEP;
    var toNumberRegex = new RegExp('[^0-9\\' + decimalSep + ']', 'g');



    function toNumber(currencyStr) {
        return parseFloat(currencyStr.toString().replace(toNumberRegex, ''), 10);
    }

    return {
        restrict : 'A',
        require : 'ngModel',
        link : function validate(scope, elem, attrs, modelCtrl) {

            modelCtrl.$parsers.push(function(newViewValue) {
                var modelValue = toNumber(newViewValue);

                var valid = modelValue <= 9999999999;

                modelCtrl.$setValidity('limitcheck', valid);

                return valid ? newViewValue : undefined;
            });
        }
    };
}

})();

并使用，

<input type="text" id="value" name="value" int-validate>

如果您想要错误消息

<p class="help-block" ng-if="cacc.form.value.$error.limitcheck">Max 10 digits allowed</p>