一.首先引入BootstrapValidator插件

BootstrapValidator插件需要jQuery和Bootstrap 3

引入js和css文件

<link rel="stylesheet" href="/path/to/bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="/path/to/dist/css/bootstrapValidator.min.css"/>

<script type="text/javascript" src="/path/to/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/path/to/bootstrap/js/bootstrap.min.js"></script>
<!-- 使用压缩过的版本-->
<script type="text/javascript" src="/path/to/dist/js/bootstrapValidator.min.js"></script>
<!-- 使用包含所有验证器的未压缩版本 -->
<script type="text/javascript" src="/path/to/dist/js/bootstrapValidator.js"></script>

二.添加验证规则

1.使用HTML添加简单验证

如果想对某一个字段添加验证规则，需要包裹，input标签必须有name值，此值为验证匹配的字段。

<div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" name="email" class="form-control" id="exampleInputEmail1" placeholder="Email"
        data-bv-notempty="true" data-bv-notempty-message="不能为空">
</div>

2.使用js添加验证

简述 bootstrapValidator 使用方法。想查看更多可以访问http://bootstrapvalidator.votintsev.ru/getting-started/ 查看文档

$('form').bootstrapValidator({
  // 默认的提示消息
  message: 'This value is not valid',
  // 表单框里右侧的icon
  feedbackIcons: {
    　　　　　　　　valid: 'glyphicon glyphicon-ok',
    　　　　　　　　invalid: 'glyphicon glyphicon-remove',
    　　　　　　　　validating: 'glyphicon glyphicon-refresh'
  },
  submitHandler: function (validator, form, submitButton) {
    // 表单提交成功时会调用此方法
    // validator: 表单验证实例对象
    // form  jq对象  指定表单对象
    // submitButton  jq对象  指定提交按钮的对象
  },
  fields: {
    username: {
      message: '用户名验证失败',
      validators: {
        notEmpty: {
          message: '用户名不能为空'
        },
        stringLength: {  //长度限制
          min: 6,
          max: 18,
          message: '用户名长度必须在6到18位之间'
        },
        regexp: { //正则表达式
          regexp: /^[a-zA-Z0-9_]+$/,
          message: '用户名只能包含大写、小写、数字和下划线'
        },
        different: {  //比较
          field: 'username', //需要进行比较的input name值
          message: '密码不能与用户名相同'
        },
        identical: {  //比较是否相同
          field: 'password',  //需要进行比较的input name值
          message: '两次密码不一致'
        },
        remote: { // ajax校验，获得一个json数据（{'valid': true or false}）
          url: 'user.php',       //验证地址
          message: '用户已存在',   //提示信息
          type: 'POST',          //请求方式
          data: function(validator){  //自定义提交数据，默认为当前input name值
            return {
              act: 'is_registered',
              username: $("input[name='username']").val()
            };
          }
        }
      }
    },
    email: {
      validators: {
        notEmpty: {
          message: '邮箱地址不能为空'
        },
        emailAddress: {
          message: '邮箱地址格式有误'
        }
      }
    }
  }
});

三.在validators中一些验证规则的总结

1.判断字段是否为空

notEmpty: {
    message: '用户名必填不能为空'
},

2.字段长度判断

 stringLength: {
     min: 6,
     max: 30,
     message: '用户名长度不能小于6位或超过30位'
     },

3.通过正则表达式进行验证

regexp: {
    regexp: /^[A-Z\s]+$/i,
    message: '名字只能由字母字符和空格组成。'
}

4.大小写验证

stringCase: {
    message: '姓氏必须只包含大写字符。',
    case: 'upper'//其他值或不填表示只能小写字符
},

5.两个字段不相同的判断

different: {
          field: 'password',
          message: '用户名和密码不能相同。'
                    }

6.email验证

          emailAddress: {
            message: '邮箱地址格式有误'
            }

7.日期格式验证

 date: {
          format: 'YYYY/MM/DD',
          message: '日期无效'
                     }

8.纯数字验证

digits: {
        message: '该值只能包含数字。'
                   }

9.ajax验证

threshold :  6 , 　　　　 //有6字符以上才发送ajax请求，（input中输入一个字符，插件会向服务器发送一次，设置限制，6字符以上才开始）
remote: {　　　　　　　　　//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}  
    url: 'exist2.do',　　　　//验证地址
    message: '用户已存在',　　//提示消息
    delay :  2000,　　　　　　//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
    type: 'POST'　　　　　　　//请求方式
7 
                     },

10.复选框验证

choice: {
                        min: 2,
                        max: 4,
                        message: '请选择2-4项'
                    }

11.密码确认

identical: {
                        field: 'confirmPassword',
                        message: 'The password and its confirm ar
                    },

12.判断输入数字是否符合大于18小于100

greaterThan: {
                        value: 18
                    },
lessThan: {
                        value: 100
                    }

13.uri验证

uri: {}

四、callback自定义校验规则

schoolName: {
       validators: {
           notEmpty: {
               message: '请选择分支机构'
           },
           callback: {
               message: '请选择分支机构',
               callback: function(value, validator) {
                   //这里可以自定义value的判断规则
                   if (value == 0) {//"请选择"
                           //错误的参数值
                           return false;
                       } else {
                           //合格的参数值
                           return true;
                       }
               }
           }
       }
   },