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添加简单验证

• 如果想对某一个字段添加验证规则，需要<div class="form-group"></div>包裹，input标签必须有name值，此值为验证匹配的字段。其实就是要符合bootstrap表单结构

<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>

初始化bootstrapValidator，submitHandler 属性后面会介绍到

$('#AppForm').bootstrapValidator({
      submitHandler: function (validator, form, submitButton) {
         // validator: 表单验证实例对象
         // form  jq对象  指定表单对象
         // submitButton  jq对象  指定提交按钮的对象
         var tourl="{:U('Admin/User/userSet')}";
         var data=$('#AppForm').serialize();
         var id = $('input[name=id]').val();
         // 使用ajax发送表达数据
         $.App.ajax('post',tourl,data,null);
         return false;
      }
})

使用data-bv-notempty 和 data-bv-notempty-message属性就可以简单进行非空验证。data-bv-notempty 有值就进行非空验证，data-bv-notempty-message 中的值为提示消息

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属性对应一个Json对象，里面可以包含多个验证的类型。我在 username 的 validators 里添加了很多属性，这些都是一些常用的属性方法，按需添加。

我自定义的正则校验，⚠️与上面代码不是对应的，大家自己根据自己需求写正则

上面代码中 emailAddress 是邮箱地址验证，都不用我们去写邮箱的正则了。除此之外还有46个其他的验证类型，大家自己去看文档。再贴几个常见的。

• between: 验证输入值必须在某一个范围值内，比如大于1小于10
• creditCard: 身份证验证
• date: 日期验证
• ip: IP地址验证
• numeric: 数值验证
• phone: 电话号码验证
• url验证