简单的登录界面
<!DOCTYPE html>
<html lang="en">
<head>
<base href="http://localhost:8080/book/">
<meta charset="UTF-8">
<title>登录</title>
<style type="text/css">
@import url("static/css/login.css");
</style>
</head>
<body>
<div class = "title">
<div id="logo">
<img src="static/img/logo.png" width="">
</div>
</div>
<div class="main">
<div class="formbox">
<h1>登录</h1>
<form action="loginServlet" method="post">
<label>用户姓名:</label>
<input type="text" class="inputfield" name = "username" placeholder="请输入用户名" /><br><br>
<label>用户密码:</label>
<input type="password" class="inputfield" name = "password" placeholder="确认密码" /><br><br>
<label>验证码:   </label>
<input type="text" class="inputfield" name="check_code" placeholder="请输入密码" />
<img alt="" src="#" width="10px"><br /><br />
<input type="submit" value="登录" id="sub_btn" />
</form>
</div>
</div>
</body>
</html>
CSS部分
body{
background: url("../img/login_bg.jpg") no-repeat fixed;
background-position: 0px 0px;
background-size: cover;
}
#logo{
float: left;
margin-left: 15px;
margin-top: 15px
}
#logo img{
width: 200px;
}
.main{
height: 500px;
}
.formbox{
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
text-align: center;
width: 450px;
height: 350px;
margin: 0 auto;
padding: 10px;
background: rgba(0,0,0,0.7);
border-radius: 30px;
}
.formbox h1{
font-weight: 400;
font-size: 40px;
font-family: 'Vibur', cursive;
color: white;
}
.formbox form{
margin: 0 auto;
color: white;
background-color: transparent;
margin-top: 50px;
}
.formbox input{
outline: none;
border:none;
color: white;
background-color: transparent;
border-bottom: 1px solid white;
font-size: 18px;
}
#sub_btn{
margin-top: 15px;
background-color: aqua;
border-radius: 15px;
border: 0px;
height: 40px;
width: 80px;
font-size: 20px;
}
JQuery部分
$(function() {
$("#sub_btn").click(function(){
//验证用户名由字母数字下划线组成
var username = $("#username").val();
var usernamePatt = /^\w{5,12}$/;
if(!usernamePatt.test(username)){
$("#errorMsg").text("用户不合法!");
return false;
}
var password = $("#password").val();
var passwordPatt = /^\w{5,12}$/;
if(!passwordPatt.test(password)){
$("#errorMsg").text(password);
return false;
}
if($("#repwd").val()!=password){
$("#errorMsg").text("密码不一致");
return false;
}
var email = $("#useremail").val();
var emailPatt = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
if(!emailPatt.test(email)){
$("#errorMsg").text("邮箱不合法");
return false;
}
var checkcode = $("#checkcode").val();
checkcode = checkcode.trim();
if(checkcode==null||checkcode==""){
$("#errorMsg").text("验证码不能为空");
return false;
}
$("#errorMsg").text("");
});
});
效果: