BootstrapValidator校验使用方法和校验规则总结

一.首先引入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: 'The input is not a valid email address'
                   }

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'//请求方式

                     },

10.复选框验证

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

11.密码确认

identical: {
                        field: 'confirmPassword',
                        message: 'The password and its confirm are not the same'
                    },

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;
                        }
                }
            }
        }
    },