蓝极冰焰 2024-09-29 22:09 采纳率: 42.3%
浏览 7
已采纳

关于注册功能需求，请帮我看看

我想实现一个注册的功能，主要包含两个需求：
1、用邮箱注册，能够实时检验是否符合邮箱的书写要求；
2、在输入的时候，实时检验用户名是否可用；
3、注册成功后，显示注册成功，并在2秒内跳转到登录页面；
以下是我的两个页面代码：
第一个：register.php

 <?php
session_start();
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
require_once '../connections/games.php'; 
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册页面</title>
</head>
<body class="body">
<div class="register">
    <div class="title">

    </div>
    <div id="username-status" style="color:#d10000"></div>
    <div>
        <form action="register.php" method="post">
            <table>
                <tr>
                    <td style="text-align:right"><label for="username">邮箱：</label></td>
                    <td><input type="text" id="username" name="username" 
                    pattern="[A-Za-z0-9@._-]+"
                    title="请输入有效的用户名（只包含英文字母（含大小写）、数字、“@”、“.”、“_”、“-”）"
                    placeholder="请输入一个邮箱" required></td>
                </tr>
                <tr style="height:10px">
                    <td></td>
                    <td style="padding:0px"><p style="font-size:8px">请输入有效的用户名<br>（仅包含英文字母（含大小写）、数字、“@”、“.”、“_”、“-”）</p></td>
                </tr>
                <tr>
                    <td style="text-align:right"><label for="password">密码：</label></td>
                    <td><input type="password" id="password" name="password"
                    pattern="[A-Za-z0-9@._]+"
                    title="请输入有效的用户名（只包含英文字母（含大小写）、数字、“@”、“.”、“_”）"
                    required></td>
                </tr>
                <tr style="height:10px">
                    <td></td>
                    <td style="padding:0px"><p style="font-size:8px">请输入有效的密码<br>（仅包含英文字母（含大小写）、数字、“@”、“.”、“_”）</p></td>
                </tr>
                <tr>
                    <td style="text-align:right"><label for="captcha">验证码：</label></td>
                    <td><input type="text" id="captcha" name="captcha" style="width:60px" required>
                        <img src="captcha.php" style="height:22px" >
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td style="font-size:16px"><input Class="button2" type="submit" value="注册"><?php
                            if ($_SERVER['REQUEST_METHOD'] === 'POST' && $_POST['captcha'] !== $_SESSION['captcha']) {
                                die('请输入验证码');
                            }
                        ?></td>
                </tr>
            </table>
        </form>
    </div>
    
</div>

</body>
<script>
document.addEventListener('DOMContentLoaded', function() {
        var input = document.getElementById('username');
        var statusDiv = document.getElementById('username-status');

        input.addEventListener('input', function() {
            var username = this.value;
            if (username.trim() !== '') {
                // 清除之前的错误信息（如果有的话）
                statusDiv.textContent = '';
                // 调用 checkUsername 函数来检查用户名
                checkUsername(username);
            }
        });
    });

    function checkUsername(username) {
        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'check_username.php', true);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

        xhr.onload = function() {
            if (xhr.status === 200) {
                var response = JSON.parse(xhr.responseText);
                if (response.status === 'error') {
                    // 显示错误信息
                    document.getElementById('username-status').textContent = response.message;
                } else if (response.status === 'success') {
                    // 用户名可用，可以清空或显示其他信息
                    document.getElementById('username-status').textContent = '';
                }
            } else {
                // 处理请求错误
                alert('请求失败，请稍后再试！');
            }
        };

        xhr.onerror = function() {
            // 处理网络错误
            alert('网络错误，请检查您的网络连接！');
        };

        // 发送请求
        xhr.send('username=' + encodeURIComponent(username));
    }
</script>
<?php

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $username = isset($_POST['username']) ? $_POST['username'] : '';
    $password = isset($_POST['password']) ? $_POST['password'] : '';
// 使用password_hash()函数生成密码的哈希值
$hashedPassword = password_hash($password, PASSWORD_DEFAULT);

try {
    $pdo->beginTransaction();

    $stmt = $pdo->prepare("INSERT INTO user (`username`, `password`, `regtime`) VALUES (?, ?, NOW())");
    $stmt->execute([$username, $hashedPassword]);

    $pdo->commit();

    if ($stmt->rowCount() > 0) {
        echo '注册成功！';
    } else {
        echo '注册失败，但SQL执行没有错误。请检查数据库约束或重试。';
    }
} catch (PDOException $e) {
    $pdo->rollBack();
    echo '数据库错误：' . $e->getMessage();
}
}
?>

</html>

第二个页面：check_username.php

<?php
session_start();

// 设置错误报告和显示错误
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

// 引入PDO连接文件
require_once '../connections/games.php';

// 检查是否通过POST方法发送了username
if (isset($_POST['username'])) {
    $username = $_POST['username'];

    // 检查用户名是否已存在
    $stmt = $pdo->prepare('SELECT COUNT(*) FROM user WHERE username = :username');
    $stmt->bindParam(':username', $username, PDO::PARAM_STR);
    $stmt->execute();
    
    $count = $stmt->fetchColumn();
    

    if ($count > 0) {
        echo json_encode(['status' => 'error', 'message' => '用户名已被占用！']);
    } else {
        echo json_encode(['status' => 'success', 'message' => '用户名可用！']);
    }

    if (!filter_var($username, FILTER_VALIDATE_EMAIL)) {
        echo json_encode(['status' => 'error', 'message' => '这不是一个有效的邮箱地址！']);
        exit;

    } else {
        echo json_encode(['status' => 'error', 'message' => '邮箱可用']);
    }

    
}
?>
  • 写回答

12条回答 默认 最新

  • caozhenyu650 2024-09-29 22:54
    关注

    此答案是由GPT4和本人亲自作答，如有帮助，还请采纳！
    从你的代码来看，已经涵盖了邮箱注册和用户名实时验证的基本功能，但有几个细节可以优化，以确保功能完整性和用户体验。以下是逐步的解决思路及建议，包括代码优化与补充。

    1. 邮箱格式实时验证

    问题描述：你希望用户在输入邮箱时，能够实时检验邮箱格式是否符合规范。

    思路：

    • 在前端使用 JavaScript 对邮箱的格式进行验证，可以使用正则表达式来检查输入是否符合标准的邮箱格式。
    • 在提交表单时，可以在后端再次使用 PHP 的 filter_var() 函数验证邮箱的合法性。

    前端优化代码：

    在你的 HTML 中，<input> 标签的 pattern 属性已经限定了邮箱的格式。为了更加直观的用户体验，建议加上实时的前端验证，直接在用户输入邮箱时提供即时反馈。

    <script>
document.addEventListener('DOMContentLoaded', function() {
    var input = document.getElementById('username');
    var statusDiv = document.getElementById('username-status');
    input.addEventListener('input', function() {
        var email = this.value;
        if (validateEmail(email)) {
            statusDiv.textContent = ''; // 邮箱格式正确
        } else {
            statusDiv.textContent = '请输入有效的邮箱地址'; // 邮箱格式不正确
        }
    });

    function validateEmail(email) {
        var re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return re.test(email);
    }
});
</script>

    后端验证：

    在 check_username.php 中已经有后端的邮箱验证代码，可以优化一下逻辑，确保前端和后端都能正确处理邮箱格式。

    if (isset($_POST['username'])) {
    $username = $_POST['username'];

    // 首先检查邮箱格式
    if (!filter_var($username, FILTER_VALIDATE_EMAIL)) {
        echo json_encode(['status' => 'error', 'message' => '这不是一个有效的邮箱地址！']);
        exit;
    }

    // 然后检查邮箱是否已经注册
    $stmt = $pdo->prepare('SELECT COUNT(*) FROM user WHERE username = :username');
    $stmt->bindParam(':username', $username, PDO::PARAM_STR);
    $stmt->execute();
    $count = $stmt->fetchColumn();

    if ($count > 0) {
        echo json_encode(['status' => 'error', 'message' => '该邮箱已被注册！']);
    } else {
        echo json_encode(['status' => 'success', 'message' => '邮箱可用！']);
    }
}

    2. 实时检验用户名是否可用

    问题描述：你已经实现了用户名的实时检验，通过 AJAX 调用 check_username.php，根据用户名是否已存在来判断其可用性。

    思路：

    • 已有逻辑基本上没有问题，但顺序上可以先进行邮箱格式的校验，再进行数据库查询以减少不必要的查询。
    • 你可以优化代码结构，提升查询效率。

    这里建议将前端逻辑中的邮箱格式检查与用户名检查结合起来，确保只有在邮箱格式正确时才发起 AJAX 请求。

    <script>
document.addEventListener('DOMContentLoaded', function() {
    var input = document.getElementById('username');
    var statusDiv = document.getElementById('username-status');
    input.addEventListener('input', function() {
        var username = this.value;
        if (validateEmail(username)) {
            checkUsername(username);
        } else {
            statusDiv.textContent = '请输入有效的邮箱地址';
        }
    });

    function validateEmail(email) {
        var re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return re.test(email);
    }

    function checkUsername(username) {
        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'check_username.php', true);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.onload = function() {
            if (xhr.status === 200) {
                var response = JSON.parse(xhr.responseText);
                statusDiv.textContent = response.message;
            } else {
                alert('请求失败，请稍后再试！');
            }
        };
        xhr.onerror = function() {
            alert('网络错误，请检查您的网络连接！');
        };
        xhr.send('username=' + encodeURIComponent(username));
    }
});
</script>

    这样做可以减少无效的请求和资源浪费。

    3. 注册成功后跳转登录页面

    问题描述：你希望在用户注册成功后，页面能够显示“注册成功”并在 2 秒内跳转到登录页面。

    思路：

    • 使用 JavaScript 的 setTimeout() 方法来控制页面跳转的时间。
    • 后端在注册成功时输出提示信息，并通过 JavaScript 实现跳转。

    代码实现：

    在 register.php 中修改注册成功后的逻辑：

    if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $username = isset($_POST['username']) ? $_POST['username'] : '';
    $password = isset($_POST['password']) ? $_POST['password'] : '';
    
    // 使用password_hash()函数生成密码的哈希值
    $hashedPassword = password_hash($password, PASSWORD_DEFAULT);

    try {
        $pdo->beginTransaction();
        $stmt = $pdo->prepare("INSERT INTO user (`username`, `password`, `regtime`) VALUES (?, ?, NOW())");
        $stmt->execute([$username, $hashedPassword]);
        $pdo->commit();

        if ($stmt->rowCount() > 0) {
            echo "<script>
                alert('注册成功！');
                setTimeout(function() {
                    window.location.href = 'login.php';
                }, 2000); // 2秒后跳转到登录页面
            </script>";
        } else {
            echo '注册失败，但SQL执行没有错误。请检查数据库约束或重试。';
        }
    } catch (PDOException $e) {
        $pdo->rollBack();
        echo '数据库错误：' . $e->getMessage();
    }
}

    这样，当注册成功时，页面会弹出提示并在 2 秒内跳转到登录页面。

    4. 其他建议

    • 密码强度：可以通过前端增强密码输入的验证规则，要求至少包含大小写字母、数字和特殊字符，增强用户账号的安全性。

      <input type="password" id="password" name="password"
       pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}"
       title="密码必须至少包含8个字符，且包含大小写字母、数字和特殊字符" required>

    • 验证码防刷：虽然你已经实现了验证码功能，但为了防止恶意攻击，可以增加验证码的复杂性，并使用后端的 session 存储。

    结论

    通过上述优化，你可以更好地实现以下功能：

    1. 用户在输入邮箱时可以实时检查格式是否合法。
    2. 在输入过程中可以实时检查用户名是否已被占用。
    3. 用户注册成功后能友好地提示，并在 2 秒内跳转到登录页面。

    这样能够提高注册功能的用户体验和安全性。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(11条)

报告相同问题？

问题事件

  • 已采纳回答 9月29日
  • 创建了问题 9月29日

悬赏问题

  • ¥15 如何在vue.config.js中读取到public文件夹下window.APP_CONFIG.API_BASE_URL的值
  • ¥50 浦育平台scratch图形化编程
  • ¥20 求这个的原理图 只要原理图
  • ¥15 vue2项目中，如何配置环境，可以在打完包之后修改请求的服务器地址
  • ¥20 微信的店铺小程序如何修改背景图
  • ¥15 UE5.1局部变量对蓝图不可见
  • ¥15 一共有五道问题关于整数幂的运算还有房间号码 还有网络密码的解答？(语言-python)
  • ¥20 sentry如何捕获上传Android ndk 崩溃
  • ¥15 在做logistic回归模型限制性立方条图时候，不能出完整图的困难
  • ¥15 G0系列单片机HAL库中景园gc9307液晶驱动芯片无法使用硬件SPI+DMA驱动，如何解决？