如何限制小时格式数字输入框的输入范围？解决值超出MIN/MAX问题

这个问题我之前也踩过坑！HTML5的min和max属性其实只负责两件事：一是约束表单提交时的校验逻辑，二是控制输入框上下箭头的步长范围，但用户手动输入数字时完全可以绕过这个限制。

给你几个实用的AngularJS解决方案，按需选择：

1. 用$watch实时修正值（快速实现） #

如果只是单个输入框需要处理，直接在控制器里加个$watch监听模型变化，超出范围就自动修正：

app.controller('YourController', function($scope) {
  $scope.$watch('model', function(newVal) {
    // 处理非数字输入的情况
    if (isNaN(newVal)) {
      $scope.model = 0;
      return;
    }
    // 把值限制在0-23区间内
    var clampedValue = Math.max(0, Math.min(23, newVal));
    if (clampedValue !== newVal) {
      $scope.model = clampedValue;
    }
  });
});

用户输入25时，输入框会立刻变成23；输入-1则自动修正为0，体验直接高效。

2. 自定义指令（推荐，可复用） #

如果多个输入框都需要范围限制，写个自定义指令更优雅，不用重复写代码：

app.directive('limitRange', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attrs, ngModelCtrl) {
      // 解析器：在模型更新前处理输入值
      ngModelCtrl.$parsers.unshift(function(value) {
        var min = parseInt(attrs.min, 10) || 0;
        var max = parseInt(attrs.max, 10) || 23;
        
        // 处理非数字输入
        if (isNaN(value)) {
          value = min;
        }
        
        // 限制值在min和max之间
        var clampedValue = Math.max(min, Math.min(max, value));
        
        // 如果值有变化，同步更新视图和模型
        if (clampedValue !== value) {
          ngModelCtrl.$setViewValue(clampedValue);
          ngModelCtrl.$render();
        }
        
        return clampedValue;
      });
    }
  };
});

使用时直接在输入框上加指令即可，还能灵活修改min和max适配其他场景（比如0-59的分钟输入）：

<input type="number" ng-model="model" min="0" max="23" limit-range />

3. 表单验证提示（不强制修正，仅提示） #

如果你不想直接修改用户输入，而是希望提示用户输入错误，可以结合Angular的表单验证机制：

<form name="hourForm" novalidate>
  <input 
    type="number" 
    name="hourInput" 
    ng-model="model" 
    min="0" 
    max="23" 
    required
  />
  <!-- 显示错误提示 -->
  <div class="error-message" ng-if="hourForm.hourInput.$dirty && hourForm.hourInput.$invalid">
    <p ng-show="hourForm.hourInput.$error.min">小时不能小于0</p>
    <p ng-show="hourForm.hourInput.$error.max">小时不能超过23</p>
    <p ng-show="hourForm.hourInput.$error.required">请输入小时数</p>
  </div>
</form>

这种方式下，用户输入超出范围时输入框会被标记为无效，同时显示对应的错误提示，但不会自动修改值，适合需要用户自主调整的场景。

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