JS登录检验注册信息是否正确

仒語

于 2024-03-23 18:41:11 发布

阅读量652

点赞数 20

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/Binyu_Z/article/details/136970607

版权

本文介绍了如何在HTML页面中使用JavaScript和localStorage实现简单的登录和注册功能，包括动态按钮效果、表单验证以及数据存储与清除。

摘要由CSDN通过智能技术生成

一、index首页，两个简单的按钮穿插了js代码来实现动态效果，比如点击登录进入登录页面，同下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
    <link href="text.css" rel="stylesheet" type="text/css">
    <script>
        function login() {
            window.location.href = 'login.html';
        }
        function register(){
            window.location.href='register.html';
        }
    </script>
</head>
<body>
    <div class="wrapper" id="wrapper">
        <div class="header" id="header" >
            <button  id="in1" onclick="login()">登录</button>
            <button  id="in2" onclick="register()">注册</button>
        </div>
        <div class="body" id="body" style="background-color: white;">
        </div>
    </div>
</body>
</html>

二、登录界面，其他没变，加了表单主体部分，另外添加了js 通过点击登录来实现信息核验，用到的是localstorage,验证成功后自动清除，localstorage.remove

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>login</title>
    <link href="text.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="wrapper" id="wrapper">
        <div class="header" id="header" >
            <button  id="in1" onclick="login()">登录</button>
            <button  id="in2" onclick="register()">注册</button>
        </div>
        <div class="body" id="body">
            <div id="container">
                <div class="container">
                    <div class="avatar-container">
                        <img src="img/c1.jpeg" alt="avatar" class="avatar"></img>
                    </div>
                    <div class="former">
                        <form action="" target="_blank" method="get" id="logform">
                            <div id="info">
                                <label><b>Username</b></label><br/>
                                <input type="text" name="Userame" placeholder="Enter Username" id="logusern"  required><br/>
                                <label><b>Password</b></label><br/>
                                <input type="password" name="Password" placeholder="Enter Password" id="logpwd" required><br/>
                                <input type="submit" value="登录" class="login"><br/>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        function login() {
            window.location.href = 'login.html';
        }
        function register(){
            window.location.href='register.html';
        }
        document.getElementById('logform').addEventListener('submit', function(event) {
            event.preventDefault();
            var username = document.getElementById('logusern').value;
            var password = document.getElementById('logpwd').value;
            // 检查localStorage中是否存储了用户信息
            if (localStorage.getItem('regusern') === username && localStorage.getItem('regpwd') === password) {
                alert('登录成功!');
                // 登录成功后清除localStorage中的注册信息
                localStorage.removeItem('regusern');
                localStorage.removeItem('regpwd');
                // 此处可以执行登录后的操作，比如跳转到主页
            } else {
                alert('登录失败，用户名或密码不正确!');
            }
        });
    </script>
</body>
</html>

三、这里是注册界面，界面上相比登录界面就多了个联系方式，而js这里来接受用户输入的信息，并将它存起来，带到登录界面里进行比较验证。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>rigister</title>
    <link href="text.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="wrapper" id="wrapper">
        <div class="header" id="header" >
            <button id="in1" onclick="login()">登录</button>
            <button id="in2" onclick="register()">注册</button>
        </div>
        <div class="body" id="body">
            <div id="container">
                <div class="container">
                    <div class="avatar-container">
                        <img src="img/c1.jpeg" alt="avatar" class="avatar"></img>
                    </div>
                    <div class="former">
                        <form action="login.html" target="_blank" method="get" id="regform">
                            <div id="info">
                                <label><b>Username</b></label><br/>
                                <input type="text" name="Userame" placeholder="Enter Username" id="regusern" required><br/>
                                <label><b>Password</b></label><br/>
                                <input type="password" name="Password" placeholder="Enter Password" id="regpwd" required><br/>
                                <label><b>linkPhone</b></label><br/>
                                <input type="text" name="linkPhone" placeholder="Enter linkPhone" id="reglink" required><br/>
                                <input type="submit" value="注册" class="register"><br/>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        function login() {
            window.location.href = 'login.html';
        }
        function register(){
            window.location.href='register.html';
        }
        document.getElementById('regform').addEventListener('submit', function(event) {
           event.preventDefault();
           var username = document.getElementById('regusern').value;
           var password = document.getElementById('regpwd').value;
           var linkphone = document.getElementById('reglink').value;
        // 存储用户信息到localStorage
           localStorage.setItem('regusern', username);
           localStorage.setItem('regpwd', password);
           localStorage.setItem('reglink', linkphone);
           alert('注册成功，请回到登录页面登录。');
        // 跳转到登录页面
            window.location.href = 'login.html';
        });
     </script>
</body>
</html>

四、css样式

*{
    padding: 0;
    margin: 0;
}
.header{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;

}
button{
    margin-left: 3px;
    background-color: rgba(7, 7, 250, 0.886);
    color: white;
    border: none;
    height: 40px;
    width: 60px;
}
.register{
    background-color: green;
    color: white;

}
.login{
    background-color: green;
    color: white;
}
.avatar-container{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
}
/* 主区 */
.body{
    background-color: rgb(155, 155, 161);
    width: 100%;
    height: 600px;
}
/* 浮动居中 */
#container{
    width:400px ;
    margin: 0 auto;
    padding: 100px;
}
/* 登录窗口 */
.container{
    width: 400px;
    height: 400px;
    background-color: white;
    float: left;
}
/* 头像 */
.avatar{
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
}
/* 相框 */
.avatar-container{
    margin: auto;
    margin-top: 35px;
}

#info{
    width:380px ;
    margin: 0 auto;
}
form input{
    width: 380px;
    height: 35px;
    margin-top: 8px;

}

五、展示

这里并没有对输入的字符进行限定，如果需要可自行添加条件判断

总结，以上就是通过localstorage来进行简单数据的存储和读取

仒語

关注

20
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
JS登录检验注册信息是否正确

二、登录界面，其他没变，加了表单主体部分，另外添加了js 通过点击登录来实现信息核验，用到的是localstorage,验证成功后自动清除，localstorage.remove。三、这里是注册界面，界面上相比登录界面就多了个联系方式，而js这里来接受用户输入的信息，并将它存起来，带到登录界面里进行比较验证。一、index首页，两个简单的按钮穿插了js代码来实现动态效果，比如点击登录进入登录页面，同下。总结，以上就是通过localstorage来进行简单数据的存储和读取。
复制链接

扫一扫