js登录注册简单tab切换页面（含前台表单验证）

前端简单登录注册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("两次密码不一致！");
    }
}