<!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 rel="stylesheet" href="./css/login.css">
<link rel="shortcut icon" href="images/logo.png" type="image/x-icon">
<title> RTC - Cultural and Creative Crowdfunding Community </title>
<style>
.error {
color: red; /* 将错误提示的字体颜色设置为红色 */
}
</style>
</head>
<body>
<div class="content-wrapper">
<div class="image-container">
<img src="./images/monai.png" alt="">
</div>
<div class="message-box">
<div class="box">
<img src="./images/RTC.png" alt="Logo" class="logo" onclick="backToHomepage()">
<div class="title">LOGIN</div>
<form id="loginForm" class="form" method="POST" action="php/login.php">
<label for="username">Username</label><span id="usernameError" class="error"></span>
<input type="text" id="username" name="username"><br>
<label for="password">Password</label><span id="passwordError" class="error"></span>
<input type="password" id="password" name="password"><br>
<p id="captchaMessage" class="captcha-message"><?php echo $_SESSION['captcha']; ?></p>
<label for="captcha">Captcha</label><span id="captchaError" class="error"></span>
<input type="text" id="captcha" name="captcha">
<div id="captchaContainer"></div>
<input type="button" value="generateCaptcha" onclick="generateCaptcha()"> <br> <br>
<input type="submit" value="submit">
</form>
</div>
</div>
</div>
<script>
document.getElementById('loginForm').addEventListener('submit', function (event) {
event.preventDefault(); // 防止表单默认提交
const form = document.getElementById('loginForm');
const formData = new FormData(form);
const xhr = new XMLHttpRequest();
xhr.open("POST", "php/login.php", true);
xhr.onload = function () {
const response = JSON.parse(this.responseText);
if (response.success) {
alert('登录成功');
window.location.href = '../project-php/HomePage.html';
} else {
document.getElementById('usernameError').innerText = response.errors.username || '';
document.getElementById('passwordError').innerText = response.errors.password || '';
document.getElementById('captchaError').innerText = response.errors.captcha || '';
}
};
xhr.send(formData);
});
function generateCaptcha() {
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
const captchaLength = 6;
let captchaText = '';
for (let i = 0; i < captchaLength; i++) {
captchaText += chars.charAt(Math.floor(Math.random() * chars.length));
}
const captchaContainer = document.getElementById('captchaContainer');
captchaContainer.textContent = captchaText;
// Store captcha in session
const xhr = new XMLHttpRequest();
xhr.open("POST", "php/store_captcha.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("captcha=" + captchaText);
}
window.onload = generateCaptcha;
</script>
</body>
</html>
求大神
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
