bootstrap-validator使用笔记

基于bootstrap的前端校验插件

参考文档

• http://blog.csdn.net/nazhidao/article/details/51542508
• http://blog.csdn.net/u013938465/article/details/53507109
• http://www.cnblogs.com/v-weiwang/p/4834672.html?ptvd

引包

引入bootstrap-validator的css文件注意bootstrap-validator是bootstrap插件，因此依赖与bootstrap。

  <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="lib/bootstrap-validator/css/bootstrapValidator.css">

引入js文件

<script src="lib/jquery/jquery.js"></script>
<script src="lib/bootstrap/js/bootstrap.js"></script>
<script src="lib/bootstrap-validator/js/bootstrapValidator.js"></script>

初始化表单校验插件

bootstrap-validator插件会在表单提交的时候进行校验，如果校验成功了，表单会继续提交，但是如果校验失败了，就会阻止表单的提交。

//使用表单校验插件
$(formSelector).bootstrapValidator({
  //1. 指定不校验的类型，默认为[':disabled', ':hidden', ':not(:visible)'],可以不设置
  excluded: [':disabled', ':hidden', ':not(:visible)'],

  //2. 指定校验时的图标显示，默认是bootstrap风格
  feedbackIcons: {
    valid: 'glyphicon glyphicon-ok',
    invalid: 'glyphicon glyphicon-remove',
    validating: 'glyphicon glyphicon-refresh'
  },

  //3. 指定校验字段
  fields: {
    //校验用户名，对应name表单的name属性
    username: {
      validators: {
        //不能为空
        notEmpty: {
          message: '用户名不能为空'
        },
        //长度校验
        stringLength: {
          min: 6,
          max: 30,
          message: '用户名长度必须在6到30之间'
        },
        //正则校验
        regexp: {
          regexp: /^[a-zA-Z0-9_\.]+$/,
          message: '用户名由数字字母下划线和.组成'
        }
      }
    },
  }

});

注册表单验证成功事件

当表单校验成功时，会触发success.form.bv事件，此时会提交表单，这时候，通常我们需要禁止表单的自动提交，使用ajax进行表单的提交。

$("#form").on('success.form.bv', function (e) {
    e.preventDefault();
    //使用ajax提交逻辑
});

常用方法

获取validator实例(对象)

当我们初始化好表单校验插件时，我们可以通过以下方法来获取表单校验的validator实例，通过validator实例调用一些方法来完成某些功能。

var validator = $("#form").data('bootstrapValidator');  //获取表单校验实例

//使用表单校验实例可以调用一些常用的方法。
validator.methodName(params);

重置表单

重置表单中设置过校验的内容，将隐藏所有错误提示和图标。

validator.resetForm();//重置表单，并且会隐藏所有的错误提示和图标

更新字段的状态

BootstrapValidator在用户输入内容的时候，会做校验，当调用bootstrap的插件的方法可以手动会改变字段值的状态。可以使用updateStatus(field, status, validatorName)方法更新字段的状态

status的值有：

• NOT_VALIDATED：未校验的
• VALIDATING：校验中的
• INVALID ：校验失败的
• VALID：校验成功的。