AngularJS ui-mask数字输入失效，求1-99整数输入的Angular解决方案

我来帮你搞定这个需求！首先看你原来的代码，问题出在ui-mask的用法上——它并不支持直接传入正则表达式作为掩码规则，而且仅靠掩码也没法完整实现1-99的范围限制，这就是它失效的原因。下面给你两个纯AngularJS（无需jQuery）的解决方案，体验和可靠性都拉满：

方案1：自定义指令（推荐，体验最流畅） #

自定义指令可以直接拦截输入过程，实时过滤非法内容并限制范围，用户输入体验最好。

第一步：编写指令代码 #

在你的Angular模块中添加这个指令：

angular.module('你的应用模块名').directive('numberRange1To99', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModelCtrl) {
      // 处理用户输入（视图转模型）
      ngModelCtrl.$parsers.push(function(inputValue) {
        if (!inputValue) return '';
        
        // 第一步：过滤所有非数字字符
        var cleanValue = inputValue.replace(/[^0-9]/g, '');
        
        // 第二步：禁止第一位为0（比如输入09会自动变成9）
        if (cleanValue.length > 1 && cleanValue[0] === '0') {
          cleanValue = cleanValue.slice(1);
        }
        
        // 第三步：限制范围在1-99之间
        var num = parseInt(cleanValue, 10);
        if (num < 1) {
          cleanValue = '1';
        } else if (num > 99) {
          cleanValue = '99';
        }
        
        // 如果清理后的值和原输入不同，更新视图
        if (cleanValue !== inputValue) {
          ngModelCtrl.$setViewValue(cleanValue);
          ngModelCtrl.$render();
        }
        
        // 返回处理后的值给ngModel
        return cleanValue ? parseInt(cleanValue, 10) : '';
      });

      // 处理模型到视图的转换（比如初始化时的赋值）
      ngModelCtrl.$formatters.push(function(modelValue) {
        if (modelValue === null || modelValue === '') return '';
        var num = parseInt(modelValue, 10);
        if (num < 1) return '1';
        if (num > 99) return '99';
        return num.toString();
      });

      // 处理粘贴事件，防止粘贴非法内容
      element.on('paste', function() {
        setTimeout(function() {
          scope.$apply(function() {
            ngModelCtrl.$setViewValue(element.val());
            ngModelCtrl.$render();
          });
        }, 0);
      });
    }
  };
});

第二步：在HTML中使用指令 #

把原来的ui-mask替换成我们的自定义指令：

<input class="form-control" type="text" name="cdtirv" 
       ng-model="elencoParametriBB.cdtirv" 
       ng-keyup="modifica()"
       number-range-1-to-99/>

这个指令会实时处理用户的每一次输入：过滤非数字、去掉开头的0、限制1-99的范围，连粘贴非法内容也能处理。

方案2：结合ng-pattern和ng-change（快速实现） #

如果不想写自定义指令，也可以用Angular内置的指令快速实现，虽然体验稍逊一点，但足够满足需求：

HTML代码 #

<form name="你的表单名">
  <input class="form-control" type="text" name="cdtirv" 
         ng-model="elencoParametriBB.cdtirv" 
         ng-keyup="modifica()"
         ng-pattern="/^[1-9][0-9]?$/"
         ng-change="validateNumberRange(elencoParametriBB.cdtirv)"/>
  <!-- 可选：显示错误提示 -->
  <span ng-show="你的表单名.cdtirv.$error.pattern" style="color: red;">
    请输入1-99之间的整数
  </span>
</form>

控制器中添加验证函数 #

$scope.validateNumberRange = function(value) {
  var num = parseInt(value, 10);
  if (isNaN(num)) {
    $scope.elencoParametriBB.cdtirv = '';
  } else if (num < 1) {
    $scope.elencoParametriBB.cdtirv = 1;
  } else if (num > 99) {
    $scope.elencoParametriBB.cdtirv = 99;
  }
};

这个方案会在用户输入后触发验证，修正超出范围的值，同时用ng-pattern确保输入格式符合1-99的正则。

为什么你原来的代码失效？ #

你用ui-mask="/^[1-9][0-9]?$/"是错误的用法——ui-mask的参数是掩码字符串（比如"99"），而不是正则表达式。而且就算你用对了掩码（比如"99"），它也只能限制输入两位数字，没法阻止输入00或者01这种不符合范围的值，所以没法满足你的需求。

内容的提问来源于stack exchange，提问作者Raul