正文

教你轻松搭建带验证码的Bootstrap登录页面

/0 浏览量
0704

在互联网时代，登录页面的设计对于用户体验和安全性至关重要。Bootstrap 是一个流行的前端框架，可以帮助开发者快速搭建响应式和美观的网页。本文将向你介绍如何使用 Bootstrap 搭建一个带有验证码的登录页面，确保登录过程的安全性。

准备工作

在开始之前，请确保你的开发环境中已安装以下工具：

  • Bootstrap: 你可以从 Bootstrap 官网 下载最新版本的 Bootstrap 文件。
  • HTML: 确保你的文本编辑器支持 HTML 语法高亮。
  • JavaScript: 了解基本的 JavaScript 语法。

创建登录页面结构

首先，我们需要创建一个基本的 HTML 结构，如下所示：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>带验证码的登录页面</title>
    <!-- 引入 Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
    <!-- 自定义 CSS -->
    <style>
        /* 在这里添加你的自定义样式 */
    </style>
</head>
<body>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h4 class="text-center">登录</h4>
                    </div>
                    <div class="card-body">
                        <form id="loginForm">
                            <div class="form-group">
                                <label for="username">用户名</label>
                                <input type="text" class="form-control" id="username" placeholder="请输入用户名">
                            </div>
                            <div class="form-group">
                                <label for="password">密码</label>
                                <input type="password" class="form-control" id="password" placeholder="请输入密码">
                            </div>
                            <div class="form-group">
                                <label for="captcha">验证码</label>
                                <div class="input-group">
                                    <input type="text" class="form-control" id="captcha" placeholder="请输入验证码">
                                    <div class="input-group-append">
                                        <img src="captcha.php" alt="验证码" class="captcha-image">
                                    </div>
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary btn-block">登录</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 引入 Bootstrap JS 和依赖 -->
    <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <!-- 自定义 JS -->
    <script>
        // 在这里添加你的自定义 JavaScript 代码
    </script>
</body>
</html>

添加验证码功能

为了实现验证码功能，我们需要创建一个名为 captcha.php 的 PHP 脚本，用于生成验证码图片。以下是一个简单的示例：

<?php
session_start();
// 验证码长度
$codeLength = 4;
// 验证码字体大小
$fontSize = 18;
// 验证码字符集合
$codeChar = '23456789abcdefghjkmnpqrstuvwxyzABCDEFGHJKMNPQRSTUVWXYZ';
// 验证码图片背景颜色
$background = imagecolorallocate($img, mt_rand(157, 255), mt_rand(157, 255), mt_rand(157, 255));
// 创建画布
$image = imagecreatetruecolor(120, 30);
// 添加背景颜色
imagefill($image, 0, 0, $background);
// 验证码字体颜色
$fontColor = imagecolorallocate($image, 0, 0, 0);
// 生成验证码
$code = '';
for ($i = 0; $i < $codeLength; $i++) {
    $code .= $codeChar[mt_rand(0, strlen($codeChar) - 1)];
}
$_SESSION['code'] = $code;
for ($i = 0; $i < $codeLength; $i++) {
    $textColor = imagecolorallocate($image, mt_rand(0, 156), mt_rand(0, 156), mt_rand(0, 156));
    imagettftext($image, $fontSize, mt_rand(-15, 15), 10 + $i * 25, 25, $textColor, 'arial.ttf', $code[$i]);
}
// 输出验证码图片
header('Content-Type: image/png');
imagepng($image);
imagedestroy($image);
?>

在 captcha.php 文件中，我们首先生成了一个随机的验证码字符串，并将其存储在会话中。然后，我们使用 PHP GD 库生成了一个验证码图片，并将其发送到客户端。

实现登录功能

接下来，我们需要为登录表单添加 JavaScript 代码，用于处理登录请求和验证码验证。以下是完整的 JavaScript 代码示例：

$(document).ready(function () {
    $('#loginForm').submit(function (e) {
        e.preventDefault();
        var username = $('#username').val();
        var password = $('#password').val();
        var captcha = $('#captcha').val();
        if (username === '' || password === '' || captcha === '') {
            alert('请填写完整信息！');
            return;
        }
        if (captcha !== '<?php echo $_SESSION['code']; ?>') {
            alert('验证码错误！');
            return;
        }
        // 发送登录请求
        $.ajax({
            type: 'POST',
            url: 'login.php', // 登录处理脚本地址
            data: {
                username: username,
                password: password
            },
            success: function (response) {
                // 登录成功
                alert('登录成功！');
            },
            error: function (response) {
                // 登录失败
                alert('登录失败，请重试！');
            }
        });
    });
});

在上述代码中，我们首先阻止了表单的默认提交行为，并获取了用户输入的用户名、密码和验证码。然后，我们检查验证码是否与会话中存储的验证码匹配。如果验证通过，我们使用 AJAX 发送登录请求到 login.php 脚本。

总结

通过以上步骤，你已经成功搭建了一个带有验证码的 Bootstrap 登录页面。这个示例涵盖了页面结构、验证码生成和登录功能。你可以根据自己的需求对代码进行修改和扩展。祝你在前端开发领域取得更好的成绩！

-- 展开阅读全文 --