1. Ideas
(1) The style of the registration page is the same as the login page
(2) The registration interface and login interface are placed in an html file, use jqeruy to switch
2. Modify on the basis of the login interface
https://www.cnblogs.com/YorkZhangYang/p/12538576.html
3. Example of tab switching in jQuery
https://www.cnblogs.com/YorkZhangYang/p/12674859.html
4. According to the example in point 3 above, modify the login page
(1) Page structure
(2) Copy a login form and modify it to register, add a few text boxes
(3) Modify the CSS style
(4) Add jQuery style switching code
5. The code is as follows
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Registration login interface
</ title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-3.4.1.js"></script>
<style>
.bg{
height: 600px;
background-image:url(images/bg.jpg);
background-size:cover;
}
.form{
background: rgba(240,240,240,0.2);
margin-top: 110px;
margin-left: 37%;
width: 378px;
}
.footer{
height: 60px;
padding-top:50px;
font-size: 14px;
font-weight: bold;
text-align: center;
clear: both;
}
.title{
height: 40px;
line-height: 40px;
margin-bottom: 10px;
background-color:transparent;
}
.row.title span{
font-size: 16px;
color: #494949;
font - weight: bolder;
/ * Convert to side-by-side block * /
display: inline - block;
text - align: center;
/ * Fill left and right * /
/ * padding: 0 68px * /
width: 49% ;
}
span.tab_active{
color: white!important;
background-color:#52ad61;
border-bottom: 2px solid #fff;
}
.formcontent
{
padding: 20px 10px;
}
</style>
</head>
<body>
<div class="page-header">
<h1> XXXX information system login registration interface </ h1>
</div>
<div class="container-fluid">
<div class="row bg">
<div class="col-md-4 form">
<div class="row title">
<span class="tab_active">登 录</span>
<span style="float: right;">注 册</span>
</div>
<div class="formcontent">
<!-Login box->
<form class="form-horizontal" id="loginForm" action="adminindex.html">
<div class="form-group">
<label for="username" class="col-sm-4 control-label">用户名</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="username" placeholder="请输入用户名" onblur="validateusername();">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-4 control-label">密码</label>
<div class="col-sm-8">
<input type="password" class="form-control" id="password" placeholder="请输入密码">
</div>
</div>
<div class="form-group">
<label for="validateCode" class="col-sm-4 control-label">验证码</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="validateCode" placeholder="请输入验证码">
</div>
<div class="col-sm-4">
<img src="images/yzm.jpg" alt="" width="75px" height="35px">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox" name="remember">记住我
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" id="submitBtn" class="btn btn-success" style="width: 50%;" >登录</button>
</div>
</div>
</form>
<!-Registration box->
<form class="form-horizontal" id="registerForm" action="" style="display: none;">
<div class="form-group">
<label for="rusername" class="col-sm-4 control-label">用户名</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="rusername" placeholder="请输入用户名" onblur="validateusername();">
</div>
</div>
<div class="form-group">
<label for="rpassword" class="col-sm-4 control-label">密码</label>
<div class="col-sm-8">
<input type="password" class="form-control" id="rpassword" placeholder="请输入密码">
</div>
</div>
<div class="form-group">
<label for="rrpassword" class="col-sm-4 control-label">确认密码</label>
<div class="col-sm-8">
<input type = "password" class = "form-control" id = "rrpassword" placeholder = "Please enter a confirmation password">
</div>
</div>
<div class="form-group">
<label for="remail" class="col-sm-4 control-label">邮箱</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="remail" placeholder="请输入邮箱">
</div>
</div>
<div class="form-group">
<label for="rtel" class="col-sm-4 control-label">电话</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="rtel" placeholder="请输入电话">
</div>
</div>
<div class="form-group">
<label for="rvalidateCode" class="col-sm-4 control-label">验证码</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="rvalidateCode" placeholder="请输入验证码">
</div>
<div class="col-sm-4">
<img src="images/yzm.jpg" alt="" width="75px" height="35px">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" id="registerBtn" class="btn btn-success" style="width: 50%;" >注册</button>
</div>
</div>
</form>
</div>
<span style="color: red;" id="tip"></span>
</div>
</div>
<div class="footer">
<p> & copy; Copyright: XX Avenue XX, XXXXX College </ p>
<p> Postcode: 530001 Contact email: [email protected] </ p>
</div>
</div>
<script>
// First get the Input object of the form
let username = document.getElementById ("username" );
let password = document.getElementById("password");
let validateCode = document.getElementById("validateCode");
let span = document.getElementById("tip");
let submitBtn = document.getElementById("submitBtn");
console.log(validateCode);
password.onblur = function()
{
validatepassword();
}
validateCode.onblur = function()
{
validatecode();
}
function validateusername()
{
let value = username.value;
if(!value)
{
span.innerHTML = "Username cannot be empty" ;
return false ;
}
else if(value.length<2||value.length>11)
{
span.innerHTML = "User name length 2-12 bits" ;
return false ;
}
else{
span.innerHTML="";
return true;
}
}
function validatepassword()
{
let value = password.value;
if(!value)
{
span.innerHTML = "Password cannot be empty" ;
return false ;
}
else if(value.length<2||value.length>11)
{
span.innerHTML = "Password length 2-12 bits" ;
return false ;
}
else{
span.innerHTML="";
return true;
}
}
function validatecode()
{
let value = validateCode.value;
if(!value)
{
span.innerHTML = "Verification code cannot be empty" ;
return false ;
}
else{
span.innerHTML="";
return true;
}
}
submitBtn.onclick=function(){
if(validateusername()&&validatepassword()&&validatecode())
{
//document.getElementById("loginForm").submit();
let strName = username.value;
let strPwd = $("#password").val();
let strCode = validateCode.value;
// Get whether checkbox is selected
let chkbox = $ ("input [name = 'remember']: checkbox"). prop ("checked" );
console.log(strName);
console.log(strPwd);
console.log(strCode);
console.log(chkbox);
$.ajax({
url:"${pageContext.request.contextPath}/LoginServlet",//LoginTest/LoginServlet
type:"post",
dataType:"text",
data:{username:strName,password:strPwd,validatecode:strCode,chkbox:chkbox},
beforeSend:function(){
$ ( "#tip"). html ("Login ......." );
},
Success: function (Data) { // is passed back from the servlet
$ ( "# Tip") HTML ( "successful login!." );
// window.location.url = "";
},
error:function()
{
$ ( "#tip"). html ("Login failed!" );
}
});
}
}
// Registration verification
// Login registration switch
$ ( function () {
// click switch
$ ('span'). Click ( function () {
$(this).addClass('tab_active').siblings().removeClass('tab_active');
var i = $(this).index();
$('.formcontent form').eq(i).css('display','block').siblings().css('display','none');
});
})
</script>
<!-jQuery (All JavaScript plugins of Bootstrap depend on jQuery, so they must be placed in front)->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<!-Load all JavaScript plugins of Bootstrap. You can also load only a single plugin as needed. ->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</body>
</html>
6. Effect chart
7. Problems
(1) The login box cannot be centered. After the width of the div class = "col-md-4 form" block is set, the margin: 0 auto cannot be centered.
(2) Leave a bit behind the registered span element, use the stupid way of span style = "float: right;" to solve it.
(3) Registered js verification is not done, there are many js codes, and they should be extracted into a single file.