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%