用户登录和注册界面的实现

最新推荐文章于 2026-05-18 12:00:53 发布

原创最新推荐文章于 2026-05-18 12:00:53 发布 · 1w 阅读

149 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

html+css+js

实现的效果

登录页面
注册页面

整体代码

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录注册页面的实现</title>
   <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div class="shadow">
        <!--登陆页面-->
        <div class="login" id="login1">
            <div class="header">
                <h2>————用户登陆————</h2>
            </div>
            <div class="content">
               <label for="username">用户名</label>
               <input id="username" type="text" placeholder="请输入用户名">
            </div>
            <div class="content">
                <label for="password">密码</label>
                <input id="password" type="text" placeholder="请输入密码">
            </div>
            <div class="regin">登陆</div>
            <div class="signup">注册</div>
        </div>
        <!--注册页面-->
        <div class="sign" id="sign1">
            <div class="header">
                <h2>————注册————</h2>
            </div>
            <div class="signName">
                <p>请输入用户名:</p>
                <input id="name" type="text" placeholder="请输入6-12个数字或字母"><span></span>
            </div>
            <div class="signPassword">
                <p>请输入密码:</p>
                <input id="pass" type="text"placeholder="请输入密码"><span></span>
            </div>
            <div class="signConfirm">
                <p>请再次输入密码:</p>
                <input id="pass1" type="text" placeholder="请确认密码"><span></span>
            </div>
            <div class="signSelect">
               <p>请选择性别：</p>
                <input type="radio" name="sex">
                <label for="">男</label>
                <input type="radio" name="sex">
                <label for="">女</label>
            </div>
            <div class="confirm">
                确认
            </div>
            <div class="back"><a href="#login1">返回</a></div>
        </div>
    </div>
   <script src="js/jquery.min.js"></script>
   <script src="js/index.js"></script>
</body>
</html>

css文件

body{
    background-image:url(https://blog.csdn.net/images/hai.jpg)
}
.shadow{
    position:fixed;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.5);
}
.login{
  position:relative;
   width:400px;
   height:300px;
   margin:200px auto;
}
.login .header h2{
   text-align:center;
   font-size:24px;
   font-family:"微软雅黑";
   margin-bottom:35px;
}
.content{
   text-align:center;
   padding:10px;
  
}
.content label{
   display:inline-block;
   min-width:70px;
   text-align:left;
   font-size:18px;
   font-family:"微软雅黑";
}
.content input{
   padding:6px;
   width:200px;
   color:#aaa;
}
.regin{
   width:45px;
   height:30px;
   cursor:pointer;
   border:1px solid #ccc;
   box-shadow: 1px 1px 2px #aaa;
   border-radius:6px;
   text-align:center;
   line-height:30px;
   position:absolute;
   top:200px;
   left:130px;
}
.signup{
width:45px;
   height:30px;
   cursor:pointer;
   border:1px solid #ccc;
   box-shadow: 1px 1px 2px #aaa;
   border-radius:6px;
   text-align:center;
   line-height:30px;
   position:absolute;
   top:200px;
   left:210px;
}
.sign{
   position:relative;
   width:350px;
   height:550px;
   margin:150px auto;
   display:none;
}
.sign p{
   font-size:18px;
   font-family:"微软雅黑";
}
.sign input{
   padding:6px;
   width:235px;
   border-radius:6px;
}
.sign .signSelect input{
   width:60px;
}
.sign .confirm{
   position:absolute;
   left:20px;
   bottom:100px;
   border:1px solid black;
   border-radius:6px;
   width:80px;
   height:30px;
   text-align:center;
   line-height:30px;
   cursor:pointer;
}
.sign .back{
   width:80px;
   height:30px;
   position:absolute;
   left:130px;
   bottom:100px;
   border:1px solid black;
   border-radius:6px;
   text-align:center;
   line-height:30px;
}
.sign .back a{
   color:black;
   text-decoration: none;
}

js文件

//登录界面
$(".regin").click(function(){
    var user =$("#username").val();
    var psw=$("#password").val();
    if(user=="admin" && psw=="123456"){
        alert("登陆成功");
    }
    else{
        alert("用户名或密码错误，请重新登陆");
    }
})
//切换到注册界面
$(".signup").click(function(){
   $(".sign").show().siblings().hide();
})
//验证用户名是否符合要求
$("#name").blur(function(){
    var reg=/^[a-zA-Z0-9\_]{6,12}$/
    var value=$(this).val();
    if(reg.test(value)){
       $(".signName span").text("符合要求")
    }
    else{
        $(".signName span").text("请按要求填写");
    }
})
//验证密码是否符合要求
$("#pass").blur(function(){
    var reg=/^[a-zA-Z0-9\_]{3,12}$/
    var value=$(this).val();
    if(reg.test(value)){
       $(".signPassword span").text("符合要求")
    }
    else{
        $(".signPassword span").text("请按要求填写");
    }
})
//再次确认密码
$("#pass1").blur(function(){
    var pass=$("#pass").val();
    var pass1=$(this).val();
    if(pass1==pass){
       $(".signConfirm span").text("");
    }
    else{
        $(".signConfirm span").text("密码不符");
    }
})
$(".confirm").click(function(){
       alert("注册成功");
})
//在注册界面返回到登录界面
$(".back").click(function(){
   $(".login").show().siblings().hide();
})

标签

#html #css #jquery