BootstrapValidator-验证插件

一、使用须知

1. 插件下载：https://github.com/nghuuphuoc/bootstrapvalidator
2. API：http://bootstrapvalidator.votintsev.ru/api/
3. 推荐：https://www.cnblogs.com/landeanfen/p/5035608.html

二、新手上路

1.在页面中引入相应的js和css，要知道bootstrap是基于jquery的，所以先引入jquery和bootstrap

好了，将上述的css和js引入到页面中就可以愉快的开发了。
2. html中的代码（这里只是为了举例拿用户名和邮箱示例一下）：

      

            用户名：
             

                      
             
      
      

             邮箱：
             

                   
             
       
      

             

                  提交
             
     

注意：使用bootstrapValidator验证插件必须将表单里的组件包裹在

这个标签中，并且一个需要验证的组件对应一个

，这样提示信息才会高亮显示。
3. js中的代码

注意：feedbackIcons是设置验证通过和不通过的图标的，fields是用来设置from中具体的表单元素验证的。

三、触类旁通

通过上面的方式我们可以轻松的对表单元素进行各种验证，但是上面这种写法确实分离我们验证的业务代码，但是实际开发中我们更喜欢将验证信息嵌在表单元素中，因为这样会更省时省力，直接copy改就可以了。那么BootstrapValidator这个插件是否支持在表单元素中直接去写呢，答案当然是肯定的。
1. html代码：

      

            用户名：
             

                      
             
      
      

             邮箱：
             

                   
             
       
      

             

                  提交
             
     

2. js代码：

3. 不用submit提交，使用点击事件触发校验
页面上有个按钮id为btn_save_id，代码如下

四、牛刀小试

下面是我碰到的一些验证，可以将验证代码直接嵌入到表单元素中
1. 正整数（正则）验证
pattern="^\+?[0-9][0-9]*$" data-bv-regexp-message="请输入正确的数字"
2. 数值类型验证
data-bv-numeric="true" data-bv-numeric-message="请输入数值类型"
3. 长度验证
data-bv-stringlength="true" data-bv-stringlength-min="1"
data-bv-stringlength-max="20" data-bv-stringlength-message="长度最大为20个字符"
4. 自定义验证规则（json验证）
data-bv-callback="true" data-bv-callback-callback="validByJsonFn" data-bv-callback-message="请输入可识别的JSON格式"

5. 表单元素二填一验证（两个input填一个即可）

 

    每天投票数量：
    

        
    


    总共投票数量：
    

        
    

js代码：

6. 还有很多很多验证，不过常用的可能基本上也就这些了，后面碰到我再补充上来

五、纵横江湖

重置某个字段验证信息
$("#form3").data("bootstrapValidator").updateStatus("answerList","VALIDATED",null);
注意：第一个参数为表单元素name，第二个参数可以是NOT_VALIDATED，VALIDATING，INVALID或者VALID，第三个参数验证程序名称，如果null该方法更新所有验证器的有效性结果。