BoostrapValidator使用方法

今天来介绍一下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 {
	width: 100%;
}

.showDataTable {
	width: 100%;
}
/*表单中日期组件图标样式配覆盖width:auto*/
.date-input-btn {
	height: 35px;
	width: 35px;
}

.qyyj {
	width: 450px;
}

.qyyj select {
	height: 25px;
	width: 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 {
	width: 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;
	width: 800px;
}

.form-picture {
	margin-bottom: 10px !important;
	width: 400px;
	height: 400px
}

.form-radio {
	margin-bottom: 10px !important;
	width: 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网站

　　

 

posted @ 2020-04-10 11:18  leagueandlegends  阅读(257)  评论(0)    收藏  举报