今天来介绍一下bootstrapValidator的使用方法。
举个例子介绍一下：
首先建立一个java web工程，工程目录如下：
需要导入的文件有bootstrap.css、boostrapValidator.min.css、bootstrap.js、bootstrapValidator.min.js、form.js、jquery.js
接着建立我们的index.jsp，代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" isELIgnored="false"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>bootstrap校验器</title>
<!-- 引入css文件 -->
<style>
.container {
100%;
}
.showDataTable {
100%;
}
/*表单中日期组件图标样式配覆盖auto*/
.date-input-btn {
height: 35px;
35px;
}
.qyyj {
450px;
}
.qyyj select {
height: 25px;
450px;
color: #626262;
line-height: 25px;
/* background-color:#05b570; */
margin-right: 1px;
margin: 1px 0px 1px 2px;
border: 1 solid #A1AAB3;
}
/*设置标题的文字样式*/
.htext {
font-size: 14px;
font-weight: bold;
}
/*设置分割线的上下间距*/
hr.fenge {
margin-top: 10px;
margin-bottom: 10px;
}
/*表单中表单组间距*/
.form-group {
90%;
margin-bottom: 10px !important;
}
.ue-tabs>li>a {
font-size: 12px;
padding: 0 25px;
line-height: 30px;
color: #3e99ff
}
.form-ll {
margin-bottom: 10px !important;
800px;
}
.form-picture {
margin-bottom: 10px !important;
400px;
height: 400px
}
.form-radio {
margin-bottom: 10px !important;
850px;
height: 850px;
}
.Validform_checktip {
font-size: 14px;
}
.btn-cckd {
font-size: 24.5px;
border: 1px solid #DDDDDD;
}
</style>
<link rel="stylesheet" href="../css/bootstrap.css" />
<link rel="stylesheet" href="../css/bootstrapValidator.min.css" />
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
<script type="text/javascript" src="../js/bootstrapValidator.min.js"></script>
<script type="text/javascript">
$(function() {
$('#saveForm').bootstrapValidator({
// 默认的提示消息
message : 'This value is not valid',
// 表单框里右侧的icon
feedbackIcons : {
valid : 'glyphicon glyphicon-ok',
invalid : 'glyphicon glyphicon-remove',
validating : 'glyphicon glyphicon-refresh'
},
fields : {
email : {
trigger : "change",
validators : {
notEmpty : {
message : '邮箱地址不能为空'
}
}
}
}
});
});
</script>
</head>
<body>
<form class="form-horizontal" id="saveForm" name="saveForm"
onsubmit="return false">
<table class="showDataTable">
<tr>
<td class="TdRight"><label for="exampleInputEmail1">Email
address</label></td>
<td class="TdRight">
<div class="form-group">
<input type="text" name="email" class="form-control"
id="exampleInputEmail1" placeholder="Email">
</div>
</td>
</tr>
</table>
</form>
</body>
</html>
代码比较简单，引入一下js和css文件，然后自己在页面上加入一个boostrapValidator进行校验，校验的内容就是下面的邮箱地址的表单，执行的效果如下：
这个地方只是举个例子，说明一下boostrapValidator的用法，还用很多的使用方法，可以参考一下https://www.cnblogs.com/smallthen/p/6780274.html这篇博客，或者直接搜一下boostrapValidator的API网站