Bootstrap验证器验证数字范围

Question

如何为两个数字设置范围验证。我想将第一个数字的最大值设为第二个数字的值，并将第二个数字的最小值设为第一个数字的值。以下是我的js代码：

min_num : {
    validators : {
        integer : { 
            message : 'Please enter the valid number ',
            min : 1,
            max : 'max_num'
        },
        notEmpty : {
            message : 'Please enter the number'
        }
    }
},
max_num : {
    validators : {
        integer : {
            message : 'Please enter the valid number ',
            min : 'min_num',
            max : 10000
        },
        notEmpty : {
            message : 'Please enter the number'
        }
    }
}

同时还有HTML：

<div class="form-group">
    <label class="col-md-2 control-label">Min num</label>
    <div class="col-md-4 inputGroupContainer">
        <div class="input-group">
            <span class="input-group-addon"> </span> <input type="number"
                class="form-control" id="min_num" name="min_num" min="0"
                required data-bind="value:replyNumber" />
        </div>
    </div>
</div>
<div class="form-group">
    <label class="col-md-2 control-label">Max num</label>
    <div class="col-md-4 inputGroupContainer">
        <div class="input-group">
            <span class="input-group-addon"> </span> <input type="number"
                class="form-control" id="max_num" name="max_num" min="0" required
                data-bind="value:replyNumber" />
        </div>
    </div>
</div>

请帮忙，谢谢。

- Hajrudin

---

你也在使用 Knockout 吗？ - Monkey_Dev1400

是的，我尝试使用“number”代替“integer”，但仍然不起作用。 :( - Hajrudin

你尝试过使用event()吗？ - Monkey_Dev1400

不行。我的整个验证流程都是这样的，当你输入错误时，输入框会变成红色，当输入正确时，输入框会变成绿色。我想让这个验证也是这样的。 - Hajrudin

Answer 1

我找到了解决方案。只需稍微修改一下我的HTML代码，它就完美地运行了 :D

<div class="form-group">
<label class="col-md-2 control-label">Min num</label>
<div class="col-md-4 inputGroupContainer">
    <div class="input-group">
        <span class="input-group-addon"> </span> <input type="number"
            class="form-control" id="min_num" name="min_num" min="0"
            required data-bind="value:replyNumber" />
     </div>
   </div>
  </div>
   <div class="form-group">
  <label class="col-md-2 control-label">Max num</label>
  <div class="col-md-4 inputGroupContainer">
     <div class="input-group">
         <span class="input-group-addon"> </span> <input type="number"
            class="form-control" id="max_num" name="max_num" 
     min=min_num required
             data-bind="value:replyNumber" />
    </div>
     </div>
    </div>

- Hajrudin