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

导读:本篇文章讲解 js登录注册简单tab切换页面(含前台表单验证),希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

前端简单登录注册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和定位来做的,所以浏览器缩放时会导致页面乱掉。

那就到这里结束。
在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由半码博客整理,本文链接:https://www.bmabk.com/index.php/post/105190.html

(0)

相关推荐

半码博客——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!