Bootstrap笔记——注册页面实现
1.思路
（1）注册页面风格与登录页面相同
（2）注册界面与登录界面放置在一个html文件中，使用jqeruy进行切换
2.在登录界面的基础上进行修改
https://www.cnblogs.com/YorkZhangYang/p/12538576.html
3.jQuery中tab标签切换例子
https://www.cnblogs.com/YorkZhangYang/p/12674859.html
4.根据以上第3点的例子，对登录页面进行修改
（1）页面结构
（2）复制一个登录的form修改为注册，添加几个文本框
（3）修改CSS样式
（4）添加jQuery样式切换代码
5.代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>注册登录界面
</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/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;
/* 转换为并排的块 */
display:inline-block;
text-align: center;
/* 左右填充满 */
/* 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信息系统登录注册界面</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">
<!-- 登录框 -->
<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>
<!-- 注册框 -->
<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="请输入确认密码">
</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>©版权所有：XXXXX学院XX市XX大道XXX号</p>
<p>邮编：530001联系邮箱：xxxxxxx@163.com</p>
</div>
</div>
<script>
//首先获取表单的Input对象
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="用户名不能为空";
return false;
}
else if(value.length<2||value.length>11)
{
span.innerHTML="用户名的长度2-12位";
return false;
}
else{
span.innerHTML="";
return true;
}
}
function validatepassword()
{
let value = password.value;
if(!value)
{
span.innerHTML="密码不能为空";
return false;
}
else if(value.length<2||value.length>11)
{
span.innerHTML="密码的长度2-12位";
return false;
}
else{
span.innerHTML="";
return true;
}
}
function validatecode()
{
let value = validateCode.value;
if(!value)
{
span.innerHTML="验证码不能为空";
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;
//获取checkbox是否已选中
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("登录中.......");
},
success:function(data){ //是从servlet传回来的
$("#tip").html("登录成功！");
//window.location.url="";
},
error:function()
{
$("#tip").html("登录失败！");
}
});
}
}
// 注册验证
// 登录注册切换
$(function(){
//点击切换
$('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 (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>
6.效果图
7.存在的问题
（1）登录框无法居中，div class="col-md-4 form"块设置宽度后，设置margin：0 auto无法居中。
（2）注册span元素后面空出一点，使用span style="float: right;"的笨办法解决。
（3）注册js验证未做，js代码较多，应提取出来单独成一个文件。
转载文章链接已标明，如有侵权请告知。文章仅作为知识记忆所用，如有错误，敬请指正。
