<%--
Created by IntelliJ IDEA.
User: cyh
Date: 2018/4/5
Time: 11:39
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
<title>登录</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入bootstrap -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/bootstrap.min.css" />
<link href="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css" rel="stylesheet">
<!-- 引入JQuery bootstrap.js-->
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/bootstrap.min.js" ></script>
<script src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>
<style type="text/css">
body{
background: url(${pageContext.request.contextPath}/static/images/b.jpg) no-repeat;
background-size:100% 100%;
background-attachment:fixed;
}
#login_box{
padding: 35px;
border-radius:15px; /*div圆角*/
background: #3c763d;
color: #fff;
}
#login_title{
color: #000000;
}
</style>
</head>
<body>
<div class="container" id="top">
<div class="row" style="margin-top: 240px;">
<div class="col-md-offset-4 col-md-4">
<div class="col-md-offset-3 col-md-9">
<h1 id='login_title'>用户登录</h1>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4" >
</div>
<div class="col-md-4" id='login_box'>
<form id="defaultForm" class="form-horizontal" method="post" action="/login">
<div class="form-group">
<label style="color:white;" class="col-md-3 control-label">用户名</label> <!--control-label标签对齐 -->
<div class="col-md-9">
<input class="form-control required" type="text" name="username" placeholder="请输入用户名"/>
</div>
</div>
<div class="form-group">
<label style="color:white;" class="col-md-3 control-label">用户密码</label>
<div class="col-md-9" style="color: white">
<input class="form-control" type="password" name="password" placeholder="请输入密码" />
</div>
</div>
<div class="form-group">
<div class="col-md-offset-7 col-md-5">
<input type="submit" class="form-control" class="btn-default" value="登录"/>
</div>
</div>
</form>
</div>
<div class="col-md-4" >
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('#defaultForm').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {/*输入框不同状态,显示图片的样式*/
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {/*验证*/
username: {/*键名username和input name值对应*/
message: '用户名无效',
validators: {
notEmpty: {
message: '用户名不能为空'
},
stringLength: {/*长度提示*/
min: 6,
max: 30,
message: '用户名长度必须在6到30之间'
}
}
},
password: {
message:'密码无效',
validators: {
notEmpty: {
message: '密码不能为空'
},
stringLength: {
min: 6,
max: 30,
message: '用户名长度必须在6到30之间'
}
}
},
}
});
});
</script>
</body>
</html>
bootstrapvalidator前端验证
最新推荐文章于 2022-12-07 15:57:11 发布