前言

博主在做项目的时候前段框架使用bootstrap,在进行表单提交是需要对表单数据进行校验,那么如何进行表单校验。

地址

校验要用的到组件叫bootstrapvalidator

bootstrapvalidator源码: https://github.com/nghuuphuoc/bootstrapvalidator

正文

文件引入

下载后需要引入jquery,bootstrap.min.js,bootstrap.min.css以及bootstrapvalidator相关的js和css。

1
2
3
4
5
6
7
<script src="/Scripts/jquery-1.10.2.js"></script>

<script src="/Content/bootstrap/js/bootstrap.min.js"></script>
<link href="/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

<script src="/Content/bootstrapValidator/js/bootstrapValidator.min.js"></script>
<link href="/Content/bootstrapValidator/css/bootstrapValidator.min.css" rel="stylesheet" />

Form表单

这里举个例子创建一个表单。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
     <form id="formLogin">
<div class="form-group">
<label>用户名</label>
<input type="text" class="form-control" name="username" />
<span id="username_err"></span><!--这里用来显示错误信息-->
</div>
<div class="form-group">
<label>密码</label>
<input type="text" class="form-control" name="password" />
<span id="password_err"></span>
</div>
<div class="form-group">
<button type="button" name="submit" class="btn btn-primary">提交</button>
</div>
</form>

校验初始化

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
<script type="text/javascript">
$(document).ready(function () {
$("#formLogin").bootstrapValidator({
excluded:[":disabled",":hidden"], // 关键配置,表示只对于禁用域不进行验证,其他的表单元素都要验证
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
username: {
container: "#username_err",//错误信息显示位置
validators: {
notEmpty: {
message: '不能为空'
}
}
},
password: {
container: "#password_err",//错误信息显示位置
validators: {
notEmpty: {
message: '不能为空'
}
}
}
}
});
});
</script>

js提交校验

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function formLogin(){
var bootstrapValidator = $("#formLogin").data("bootstrapValidator").validate();
if (bootstrapValidator.isValid()){
//异步提交
$.ajax({
type : 'post',
url : "",
dataType: 'json',
data : $("#formLogin").serialize(),
success : function(result) {
alert(result.rspMsg);
}
});
}
}

以上只是简答的校验表单数据是否为空,如果为空则会在<span></span>里面显示错误信息。不为空则提交登录。

当然bootstrap表单校验并不是只有这么一点能力的,继续看吧。

进阶

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
  $(function () {
$('#formLogin').bootstrapValidator({
excluded:[":disabled",":hidden"], // 关键配置,表示只对于禁用域不进行验证,其他的表单元素都要验证
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
username: {
message: '用户名验证失败',
validators: {
notEmpty: {
message: '用户名不能为空'
},
stringLength: {
min: 6,
max: 18,
message: '用户名长度必须在6到18位之间'
},
regexp: {
regexp: /^[a-zA-Z0-9_]+$/,
message: '用户名只能包含大写、小写、数字和下划线'
}
}
},
email: {
validators: {
notEmpty: {
message: '邮箱不能为空'
},
emailAddress: {
message: '邮箱地址格式有误'
}
}
}
}
});
});

这段可以看出,不但能够对数据是否为空进行校验,还能对数据格式进行校验。-

  • notEmpty:不能为空。

  • emailAddress:邮箱格式

  • regexp:正则表达式

  • stringLength:数据长度

其实还有很多的校验规则,它们都是以JSON格式呈现的。其他常见的校验格式:

  • creditCard:身份证
  • date:日期
  • ip:IP地址
  • phone: 电话
  • url:url链接
  • ······

对于日常开发工作这些已经足够使用了,想要更深了解的可直接参考官方api。

好啦,这次就说到这里。