bootstrap validator怎么用

Posted 2023-05-10

参考技术A 如果你使用的前端框架是bootstrap，那么前端验证框架就不必考虑了，bootstrapvalidator是最好的选择，它和bootstrap的结合最完美，不过要注意版本的问题，针对bootstrap2和bootstrap3有不同的版本。

下面是我遇到的两个注意事项，自己做个笔记：

1、为每个要验证的表单元素添加name属性

例如：

<div class="form-group">
<input type="text" placeholder="请输入短信验证码" id="smsCaptcha" name="smsCaptcha" class="form-control"
data-bv-notempty data-bv-notempty-message="验证码不能为空"
data-bv-regexp="true" data-bv-regexp-regexp="[0-9]6" data-bv-regexp-message="验证码格式不正确"
>
</div>
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"
data-bv-notempty data-bv-notempty-message="验证码不能为空"
>
</div>

上面这个例子中，第一个表单元素添加了name属性，第二个表单元素没有name属性，而这两个表单元素都使用了非空验证，最终效果如下：

从结果可以看出，如果要验证一个表单项，则该表单项必须有name属性。否则验证将不起作用。

2、为保持良好的效果，表单元素最好放在div.form-group里面

例如下面这个例子：

<label for="exampleInputEmail1">用户名</label>
<div class="input-group" >
<input type="text" class="form-control required" placeholder="用户名" id="username" name="username" data-bv-notempty data-bv-notempty-message="请输入用户名" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-user"></span>
</span>
</div>本回答被提问者和网友采纳

Bootstrap Validator 验证数字范围

【中文标题】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>