使用原生js写一个简单的注册登录页面

最新推荐文章于 2024-05-13 16:21:10 发布

一花一world

最新推荐文章于 2024-05-13 16:21:10 发布

阅读量4.2k

点赞数 6

分类专栏：前端文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/ACCPluzhiqi/article/details/131529334

版权

前端专栏收录该内容

178 篇文章 28 订阅

订阅专栏

在这里插入图片描述

我们定义了一个简单的注册登录页面。页面包含一个用户名输入框、一个密码输入框和一个注册按钮和登录按钮。

在JavaScript部分，我们定义了两个函数：register()和login()。这两个函数分别用于处理注册和登录的逻辑。

在register()函数中，我们通过getElementById()方法获取用户名和密码的输入框的值，并进行相应的处理。在这个例子中，我们只是简单地打印注册成功的信息。

在login()函数中，我们也是通过getElementById()方法获取用户名和密码的输入框的值，并进行相应的处理。在这个例子中，我们只是简单地打印登录成功的信息。

需要注意的是，上述代码只是一个简单的示例，没有进行实际的注册和登录操作。在实际的应用中，我们需要将注册和登录的逻辑与后端服务器进行交互，进行真正的注册和登录操作。

希望这个示例能够帮助你理解如何使用原生JavaScript编写一个简单的注册登录页面。

<!DOCTYPE html>
<html>
<head>
    <title>注册登录页面</title>
    <style>
        .container {
            width: 300px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        
        .form-group {
            margin-bottom: 10px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 5px;
        }
        
        .form-group input {
            width: 100%;
            padding: 5px;
        }
        
        .form-group button {
            margin-top: 10px;
        }
    </style>
    <script>
        // 切换到注册页面
        function switchToRegister() {
            document.getElementById("login-form").style.display = "none";
            document.getElementById("register-form").style.display = "block";
        }
        
        // 切换到登录页面
        function switchToLogin() {
            document.getElementById("register-form").style.display = "none";
            document.getElementById("login-form").style.display = "block";
        }
        
        // 注册函数
        function register() {
            var username = document.getElementById("register-username").value;
            var password = document.getElementById("register-password").value;
            
            // 进行注册逻辑处理，这里只是简单的打印注册信息
            console.log("注册成功！用户名：" + username + "，密码：" + password);
        }
        
        // 登录函数
        function login() {
            var username = document.getElementById("login-username").value;
            var password = document.getElementById("login-password").value;
            
            // 进行登录逻辑处理，这里只是简单的打印登录信息
            console.log("登录成功！用户名：" + username + "，密码：" + password);
        }
    </script>
</head>
<body>
    <div class="container">
        <h1>注册登录页面</h1>
        
        <!-- 登录表单 -->
        <div id="login-form">
            <div class="form-group">
                <label for="login-username">用户名：</label>
                <input type="text" id="login-username" name="login-username">
            </div>
            
            <div class="form-group">
                <label for="login-password">密码：</label>
                <input type="password" id="login-password" name="login-password">
            </div>
            
            <div class="form-group">
                <button onclick="login()">登录</button>
                <button onclick="switchToRegister()">注册</button>
            </div>
        </div>
        
        <!-- 注册表单 -->
        <div id="register-form" style="display: none;">
            <div class="form-group">
                <label for="register-username">用户名：</label>
                <input type="text" id="register-username" name="register-username">
            </div>
            
            <div class="form-group">
                <label for="register-password">密码：</label>
                <input type="password" id="register-password" name="register-password">
            </div>
            
            <div class="form-group">
                <button onclick="register()">注册</button>
                <button onclick="switchToLogin()">返回登录</button>
            </div>
        </div>
    </div>
</body>
</html>

在上述代码中，我们使用了一些CSS样式来美化页面的外观。注册和登录表单分别被包裹在一个容器中，并通过CSS样式进行居中显示和边框样式设置。

我们添加了一个切换到注册页面的函数switchToRegister()，该函数将登录表单隐藏，显示注册表单。类似地，我们还添加了一个切换到登录页面的函数switchToLogin()，该函数将注册表单隐藏，显示登录表单。

在注册和登录函数中，我们分别获取注册和登录表单中的用户名和密码，并进行相应的处理。在这个例子中，我们只是简单地打印注册和登录成功的信息。

一花一world

关注

6
点赞
踩
47

收藏

觉得还不错? 一键收藏
打赏
0
评论
使用原生js写一个简单的注册登录页面

在register()函数中，我们通过getElementById()方法获取用户名和密码的输入框的值，并进行相应的处理。在login()函数中，我们也是通过getElementById()方法获取用户名和密码的输入框的值，并进行相应的处理。需要注意的是，上述代码只是一个简单的示例，没有进行实际的注册和登录操作。在实际的应用中，我们需要将注册和登录的逻辑与后端服务器进行交互，进行真正的注册和登录操作。在注册和登录函数中，我们分别获取注册和登录表单中的用户名和密码，并进行相应的处理。// 切换到登录页面。
复制链接

扫一扫