plugin

前端校验插件bootstrap-validator

前端校验插件bootstrap-validator

一、引包

  1. 引入bootstrap-validator的css文件。由于bootstrap-validator是bootstrap插件，因此需要先引入bootstrap。
1
2
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="lib/bootstrap-validator/css/bootstrapValidator.css">
  1. 引入bootstrap-validator的js文件
1
2
3
<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插件会在表单提交的时候进行校验，如果校验失败了，就会阻止表单的提交。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// 使用表单校验插件
$(form表单选择器).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进行表单的提交。

1
2
3
4
5
$(form表单选择器).on('success.form.bv', function (e) {
    // 阻止type="submit"的表单标签的默认提交事件
    e.preventDefault();
    // 使用ajax提交逻辑
});

四、获取validator实例(对象)

表单校验插件初始化完成后，可以通过以下方法来完成功能。

1
2
3
4
5
// 获取表单校验的validator实例
const validator = $(form表单选择器).data('bootstrapValidator'); 

// 使用表单校验实例来调用一些常用的方法
validator.methodName(parameters);

1. 重置表单

由于表单标签的原生reset方法无法影响bootstrap-validator中的额外内容，所以需要用内置的方法重置表单中设置过校验的内容，隐藏所有错误提示和图标。

1
2
// 重置表单，并且会隐藏所有的错误提示和图标
$(form表单选择器).validator.resetForm();

2. 更新字段的状态

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

  1. field为需要更新的表单的name属性
  2. status的值有：

① NOT_VALIDATED：未校验的
② VALIDATING：校验中的
③ INVALID ：校验失败的
④ VALID：校验成功的

  1. validatorName为校验器的名字（notEmpty、stringLength等）。

① 对于校验失败的情况，通常写一个callback来执行，如果不传入参数就会将所有校验器更新为status的状态

② 对于校验成功的情况就不需要写了

五、参考文档