前端简单登录注册tab切换页面
只是重点说思路，写的页面很简单。
思路就是，登录注册两个表单来回切换，其实就是默认其中一个页面是不显示的，当你点击另一个比如从登录到注册，将登录盒子设置为不显示，注册盒子为显示状态。
即修改dom元素的style属性中的display属性值ele.style.display="none"
html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录页面tab切换</title>
<link href="css/index.css" rel="stylesheet">
</head>
<body>
<div class="box">
<div class="title">
<span id="login">登录</span>
<span id="register">注册</span>
</div>
<div id="loginBox">
<form action="#1">
<span>用户名</span><input type="text" placeholder="用户名" id="userNameL" >
<span>密码</span><input type="password" placeholder="密码" id="passwordL1">
<input type="submit" value="提交" onclick="lookInfo()">
<input type="reset" value="取消">
</form>
</div>
<div id="registerBox">
<form action="#2">
<span>用户名</span><input type="text" placeholder="用户名" id="userNameR">
<span>密码</span><input type="password" placeholder="密码" id="passwordR1">
<span>确认密码</span><input type="password" placeholder="确认密码" id="passwordR2">
<input type="submit" value="提交" onclick="loginCheck()">
<input type="reset" value="返回登录" onclick="goBackLogin()">
</form>
</div>
</div>
<script src="js/tabChange.js" type="text/javascript"></script>
</body>
</html>
css部分
tip:input[type="xxxx"]是input标签的类型选择器，type里面的值就是input标签中在html中的type值，text,password,submit…
*{
margin: 0;
padding: 0;
}
.box{
width: 100vw;
height: 935px;
background-color:#3F4277 ;
position: relative;
}
.box .title{
width:400px;
height: 40px;
position: absolute;
left: 800px;
top:25%;
box-sizing: border-box;
position: relative;
border-radius: 10px;
}
.box .title span{
width: 200px;
height: 40px;
display: inline-block;
cursor: pointer;
background-color: #FC9A02;
text-align: center;
line-height: 40px;
border-radius: 10px;
box-shadow: 2px 2px 2px 2px gray;
}
.box .title span:nth-of-type(1){
position: absolute;
left: 0;
}
.box .title span:nth-of-type(2){
position: absolute;
left: 200px;
}
.box #loginBox{
width:400px;
height: 180px;
display: block;
background-color: #F2F4F5;
box-sizing: border-box;
box-shadow: 2px 2px 2px 2px gray;
border-radius: 5px;
position: absolute;
left: 800px;
top:30%;
}
.box #registerBox{
width:400px;
height: 240px;
display: none;
background-color: #F2F4F5;
box-sizing: border-box;
box-shadow: 2px 2px 2px 2px gray;
border-radius: 5px;
position: absolute;
left: 800px;
top:30%;
}
input[type="text"]{
border: none;
outline:none;
background-color: #F2F4F5;
display: inline-block;
width: 300px;
height: 60px;
line-height: 60px;
letter-spacing: 2px;
box-shadow: 1px gray;
font-size: 20px;
text-indent: 20px;
}
.box div form span{
display: inline-block;
width: 100px;
height: 60px;
text-align: center;
font-weight: bold;
line-height: 60px;
}
input[type="password"]{
border: none;
outline:none;
background-color: #F2F4F5;
display: inline-block;
width: 300px;
height: 60px;
line-height: 60px;
letter-spacing: 2px;
box-shadow: 1px gray;
font-size: 20px;
text-indent: 20px;
}
input[type="submit"]{
background-color: #F2F4F5;
display: inline-block;
width:197px;
height: 58px;
line-height: 60px;
font-size: 20px;
letter-spacing: 2px;
border: 1px solid gray;
border-radius: 5px;
font-weight: bold;
}
input[type="reset"]{
background-color: #F2F4F5;
display: inline-block;
width: 197px;
height: 58px;
line-height: 60px;
font-size: 20px;
letter-spacing: 2px;
border: 1px solid gray;
border-radius: 5px;
font-weight: bold;
}
js部分
主要利用了dom操作修改元素，以及点击事件。
// 首先获取标题切换元素，和 表单元素
let login = document.getElementById("login");
let register = document.getElementById("register");
let loginBox = document.getElementById("loginBox");
let registerBox = document.getElementById("registerBox");
let userNameL = document.getElementById("userNameL");
let userNameR = document.getElementById("userNameR");
let passwordL1 = document.getElementById("passwordL1");
let passwordR1 = document.getElementById("passwordR1");
let passwordR2 = document.getElementById("passwordR2");
//为 标题切换的两个span元素添加点击事件
login.onclick = function(){
// 修改display属性值
loginBox.style.display="block";
registerBox.style.display="none";
}
register.onclick = function(){
registerBox.style.display="block";
loginBox.style.display="none";
}
//登录成功后，提示登录的用户名和密码
function lookInfo(){
alert("用户名："+userNameL.value+"\n"+"密码："+passwordL1.value);
}
// 注册里面的返回按钮，返回到登录页面与上面标题切换是同样的
function goBackLogin(){
registerBox.style.display="none";
loginBox.style.display="block";
}
// 注册表单检查
function loginCheck(){
let u1 = userNameR.value;
let p1 = passwordR1.value;
let p2 =passwordR2.value;
console.log(u1+""+p1+""+p2);
if(u1!=""&&p1===p2&&p1!=""){
alert("注册成功！");
alert("用户名:"+u1+"\n"+"密码:"+p1);
}
if(u1===""){
alert("用户名不能为空");
}
if(p1===""){
alert("密码不能为空！");
}
if(p2===""){
alert("重复密码不能为空！");
}
if(p2!=p1){
alert("两次密码不一致！");
}
}
项目目录结构
登录页面
注册页面
表单验证
点击上面登录或者注册就可以进行表单切换了，并且注册时会有相应的表单验证。然后这个项目写的时候只是为了做tab切换，屏幕适配方面并没有考虑，上面的css代码是根据宽1920px和定位来做的，所以浏览器缩放时会导致页面乱掉。
那就到这里结束。
