PHP+HTML+bootstrap 简单的页面验证,美观

效果图,输入密码就能访问原始的页面。

超级简单,超级使用的代码!

20240705225405873-图片

代码:

// 验证密码逻辑
$correct_password = 'www.4s5.cn'; // 设置正确的密码
$is_authenticated = false;

if (isset($_POST['password'])) {
    if ($_POST['password'] === $correct_password) {
        $is_authenticated = true;
    } else {
        echo "<script>alert('密码错误,请重新输入!');</script>";
    }
}

// 如果未经过验证,显示密码输入框
if (!$is_authenticated) {
    echo '
        <!DOCTYPE html>
        <html lang="zh-CN">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>密码验证</title>
          <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0-alpha1/css/bootstrap.min.css" rel="stylesheet">
        </head>
        <body>
          <div class="container mt-5">
            <div class="row justify-content-center">
              <div class="col-md-6">
                <div class="card">
                  <div class="card-body">
                    <h3 class="card-title text-center">请输入访问密码</h3>
                    <form method="post">
                      <div class="mb-3">
                        <label for="password" class="form-label">密码:</label>
                        <input type="password" class="form-control" id="password" name="password" required>
                      </div>
                      <div class="text-center">
                        <button type="submit" class="btn btn-primary">确认</button>
                      </div>
                    </form>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
          <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0-alpha1/js/bootstrap.bundle.min.js"></script>
        </body>
        </html>
    ';
    exit; // 停止加载原页面内容
}

下面是进阶版的代码!

输入密码后,可以开启缓存。

再次刷新,不用继续输入。

session_start();

$correct_password = 'www.4s5.cn'; // 设置正确的密码

// 检查是否已验证过且未过期
if (isset($_SESSION['password_verified']) && $_SESSION['password_verified'] === true) {
    // 检查过期时间
    if (isset($_SESSION['password_expire']) && $_SESSION['password_expire'] >= time()) {
        // 验证通过,继续执行页面加载
        // 你的页面内容和逻辑放在这里
    } else {
        // 过期了,要求重新输入密码
        unset($_SESSION['password_verified']);
        unset($_SESSION['password_expire']);
        require_password();
    }
} else {
    // 如果是第一次访问或者验证未通过,要求输入密码
    require_password();
}

function require_password() {
    if (isset($_POST['password'])) {
        global $correct_password;

        // 验证密码
        if ($_POST['password'] === $correct_password) {
            // 设置验证通过的 Session 变量和过期时间
            $_SESSION['password_verified'] = true;
            $_SESSION['password_expire'] = time() + (2 * 24 * 60 * 60); // 两天后的时间戳

            // 重定向或继续加载页面
            header('Location: ' . $_SERVER['PHP_SELF']);
            exit;
        } else {
            echo "<script>alert('密码错误,请重新输入!');</script>";
        }
    }

    // 显示密码输入框的 HTML
    echo '
        <!DOCTYPE html>
        <html lang="zh-CN">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>密码验证</title>
          <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0-alpha1/css/bootstrap.min.css" rel="stylesheet">
        </head>
        <body>
          <div class="container mt-5">
            <div class="row justify-content-center">
              <div class="col-md-6">
                <div class="card">
                  <div class="card-body">
                    <h3 class="card-title text-center">请输入访问密码</h3>
                    <form method="post">
                      <div class="mb-3">
                        <label for="password" class="form-label">密码:</label>
                        <input type="password" class="form-control" id="password" name="password" required>
                      </div>
                      <div class="text-center">
                        <button type="submit" class="btn btn-primary">确认</button>
                      </div>
                    </form>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
          <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0-alpha1/js/bootstrap.bundle.min.js"></script>
        </body>
        </html>
    ';
    exit; // 停止加载原页面内容
}
// 继续加载原页面内容

 

© 版权声明
THE END
喜欢就支持一下吧
点赞14
相关推荐
评论 抢沙发

请登录后发表评论

    暂无评论内容