Angular新手求助：如何验证两个数字输入框值在0-10000范围内

嗨，作为Angular新手，你这个需求其实可以通过结合内置指令来更优雅地解决，先聊聊你现有代码的问题，再给你靠谱的解决方案：

你现有代码的问题 #

你用的ng-pattern="/^[0-9]{1,7}$/"只能匹配1到7位的数字，但没法限制最大值不超过10000——比如输入123456会被通过，但显然超出了你的范围；另外它还允许前导零（比如000123），这可能不是你想要的；同时也没和数值范围验证结合，没法直接提示用户“超出范围”这类明确的错误。

最优解决方案：结合ng-min/ng-max + ng-pattern #

Angular本身提供了ng-min和ng-max指令，专门用于数字输入框的范围限制，再配合ng-pattern确保输入格式合法（比如避免非数字、前导零、科学计数法等问题），完美适配你的需求。

1. 整数版本（仅允许0-10000的整数） #

下面是优化后的完整代码：

<form name="priceForm" novalidate>
  <div class='panel'>
    <span>Min: $&nbsp;</span>
    <input 
      id="text-input-1" 
      class="width" 
      type="number" 
      placeholder="USD " 
      ng-model="vm.min" 
      ng-min="0" 
      ng-max="10000"
      ng-pattern="/^(0|([1-9]\d{0,3})|10000)$/"
      step="1"
      name="minInput"
    >
    <span>Max: $&nbsp;</span>
    <input 
      id="text-input-2" 
      class="width" 
      type="number" 
      placeholder="USD " 
      ng-model="vm.max" 
      ng-min="0" 
      ng-max="10000"
      ng-pattern="/^(0|([1-9]\d{0,3})|10000)$/"
      step="1"
      name="maxInput"
    >

    <!-- 错误提示示例 -->
    <div ng-show="priceForm.minInput.$error.pattern" style="color: red;">
      请输入0-10000之间的整数，不能有前导零
    </div>
    <div ng-show="priceForm.minInput.$error.min || priceForm.minInput.$error.max" style="color: red;">
      输入值必须在0到10000之间
    </div>
    <div ng-show="priceForm.maxInput.$error.pattern" style="color: red;">
      请输入0-10000之间的整数，不能有前导零
    </div>
    <div ng-show="priceForm.maxInput.$error.min || priceForm.maxInput.$error.max" style="color: red;">
      输入值必须在0到10000之间
    </div>
  </div>
</form>

各部分说明：

• ng-min="0"和ng-max="10000"：直接从数值层面限制输入范围，输入小于0或大于10000时，控件会标记为无效，错误类型为min或max。
• ng-pattern="/^(0|([1-9]\d{0,3})|10000)$/"：确保输入格式合法：
  • 匹配单独的0
  • 匹配1-9开头的1-4位数字（即1-9999，避免前导零）
  • 精确匹配10000
• step="1"：强制输入框的上下箭头每次增减1，确保输入整数；如果不需要箭头控制，也可以去掉，但保留更友好。
• 表单和控件的name属性：用于在模板中获取验证状态，显示对应的错误提示。

2. 小数版本（允许0-10000的小数，最多两位） #

如果需要支持小数（比如金额保留两位小数），只需要调整ng-pattern和step：

<input 
  id="text-input-1" 
  class="width" 
  type="number" 
  placeholder="USD " 
  ng-model="vm.min" 
  ng-min="0" 
  ng-max="10000"
  ng-pattern="/^(0(\.\d{1,2})?|([1-9]\d{0,3}(\.\d{1,2})?)|10000(\.0{1,2})?)$/"
  step="0.01"
  name="minInput"
>

这个正则会匹配：

• 0或0.xx（最多两位小数）
• 1-9999的整数或带两位小数的数
• 10000或10000.00

额外提示 #

• 虽然type="number"会阻止大部分非数字输入，但有些浏览器允许输入e（科学计数法），ng-pattern可以完美拦截这种情况。
• 如果你不需要自定义格式限制（比如允许前导零），甚至可以只使用ng-min和ng-max，足够满足范围限制的需求；但加上ng-pattern能让输入更规范。

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