Fork me on GitHub

bootstrap-validator表单校验插件的使用

发表于 | 分类于 | 本文总阅读量 次

基于bootstrap的表单校验插件使用说明。

参考文档

引包

引入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">

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

html结构

1
2
3
4
5
6
7
<form id="demo_form">
  ...
  <button type="submit">提交</button>   <!--当需要自动触发验证时，type必须为submit-->
</form>

<!--也可以是表单元素外的提交按钮,加上关联属性form即可-->
<button type="submit" form="demo_form">提交</button>

初始化表单校验插件

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
38
39
40
41
42
43
44
45
46
47
//使用表单校验插件
$(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: '用户名由数字字母下划线和.组成'
        }
      }
    },
    email : {
       validators : {
          notEmpty: {
          	message: '用户名不能为空'
          },
          emailAddress: {
           	message: '邮箱地址格式有误'
      	  }
       }
    }
  }

});

注册表单验证成功事件

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//1.当提交按钮是: [type="submit"] 表单元素时，会在提交之前自动去进行表单验证

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


//2.当提交按钮是 普通按钮时

$("buttonName").on("click", function(){
     //获取表单对象
    var bootstrapValidator = $("form").data('bootstrapValidator');
  
        bootstrapValidator.validate();  //手动触发验证
  
        if(bootstrapValidator.isValid()){  //验证通过时执行相关操作
            //表单提交的方法、比如ajax提交
        }
});

常用方法

获取validator实例(对象)

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

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

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

1.手动触发表单验证

1
2
3
4
//触发全部验证
$(formName).data("bootstrapValidator").validate();
//触发指定字段的验证
$(formName).data("bootstrapValidator").validateField('fieldName');

2.获取当前表单验证状态

1
2
// flag = true/false , 返回true表示验证通过
var flag = $(formName).data(“bootstrapValidator”).isValid();

重置表单

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

1
2
//方法1:
validator.resetForm();//重置表单，并且会隐藏所有的错误提示和图标
1
2
3
4
5
6
7
8
9
//方法2:
//注册模态框关闭事件,模态框关闭后清除所有验证样式,隐藏所有的错误提示和图标
  $('#mymodal').on('hidden.bs.modal', function (e) {
    e.preventDefault();
    //清除验证样式
    $("#user_form").data("bootstrapValidator").destroy();
    $("#user_form").data("bootstrapValidator" , null);
    formValidator();  //封装的验证函数
  });

更新字段的状态

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

1
2
3
4
5
6
7
8
9
10
//参数说明：
// field   字段名
// status  校验状态
// validatorName   验证器名字（例如：notEmpty）

//status的值有：
// "NOT_VALIDATED"   //未校验的
// "VALIDATING"    //校验中的
// "INVALID"     //校验失败的
// "VALID"    //校验成功的。
0%