Bootstrap Validator 验证数字范围

Posted 2023-02-26

【中文标题】Bootstrap Validator 验证数字范围

【英文标题】：Bootstrap Validator validate number range

【发布时间】：2017-11-21 18:14:27

【问题描述】：

如何为两个数字的范围设置验证。我想将第一个数字的最大值设置为第二个数字的值，将第二个数字的最小值设置为第一个 numb 的值。这是我的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>

请帮忙谢谢

【问题讨论】：

你也在用knockout吗？

是的，我尝试用整数代替整数来输入数字，但仍然无法正常工作。 :(

你尝试过使用 event() 吗？

没有。我的整个验证是这样的，当你输入错误的输入字段时，当它的 ok 输入字段是绿色时，它会变成红色，我想像这样进行这个验证？

【参考方案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>