<!
DOCTYPE html>
<html lang="zh
-CN">
<head>
<meta charset="UTF
-8">
<meta name="viewport" content="width=device
-width,
initial
-scale=1
.0">
<title>xx市地理可视化系统</title>
<l
ink href="https://cdn
.jsdelivr
.net/npm/bootstrap@5
.3
.0/dist/css/bootstrap
.m
in.css" rel="stylesheet">
<l
ink rel="stylesheet" href="https://cdn
.jsdelivr
.net/npm/bootstrap
-icons@1
.10
.0/font/bootstrap
-icons
.css">
<style>
body {
background
-color: #f5f5f5;
font
-family: 'KaiTi', '楷体', serif;
}
.log
in-box {
width: 400px;
marg
in: 100px auto;
padd
ing: 30px;
background: white;
border
-radius: 8px;
box
-sha
dow: 0 4px 12px rgba(0,0,0,0
.1);
}
.title {
text
-align: center;
marg
in-bottom: 25px;
color: #3498db;
font
-weight: bold;
font
-size: 24px;
}
.captcha
-box {
display: flex;
align
-items: center;
marg
in: 15px 0;
}
.captcha {
font
-size: 18px;
letter
-spac
ing: 3px;
color: #e74c3c;
font
-weight: bold;
marg
in-left: 10px;
user
-select: none;
}
</style>
</head>
<body>
<div class="log
in-box">
<div class="title">恩施市地理可视化系统</div>
<form id="log
inForm">
<div class="mb
-3">
<label for="username" class="form
-label">用户名</label>
<
input type="text" class="form
-control" id="username" required>
<div class="
invalid-feedback">用户名不能为纯数字</div>
</div>
<div class="mb
-3">
<label for="password" class="form
-label">密码</label>
<
input type="password" class="form
-control" id="password" required>
<div class="
invalid-feedback">密码长度至少4位</div>
</div>
<div class="captcha
-box">
<
input type="text" class="form
-control" id="captcha
Input" placeholder="输入验证码" required>
<div class="captcha" id="captcha"></div>
</div>
<div class="d
-grid gap
-2 mt
-4">
<button type="submit" class="btn btn
-primary"><i class="bi bi
-box
-arrow
-in-right"></i> 登录</button>
<button type="button" class="btn btn
-outl
ine
-secondary" onclick="w
indow
.location
.href='registration
.html'"><i class="bi bi
-person
-plus"></i> 注册</button>
</div>
</form>
</div>
<script src="https://cdn
.jsdelivr
.net/npm/bootstrap@5
.3
.0/dist/js/bootstrap
.bundle
.m
in.js"></script>
<script>
// 生成验证码
function generateCaptcha() {
const chars = '0123456789ABCDEFGHJKLMNPQRSTUVWXYZ';
let captcha = '';
for (let i = 0; i < 5; i++) {
captcha += chars
.charAt(Math
.floor(Math
.ran
dom() * chars
.length));
}
document
.getElementById('captcha')
.textContent = captcha;
return captcha;
}
let currentCaptcha = generateCaptcha();
document
.getElementById('log
inForm')
.addEventListener('submit', function(e) {
e
.preventDefault();
// 获取表单数据
const username =
document
.getElementById('username')
.value;
const password =
document
.getElementById('password')
.value;
const captcha
Input =
document
.getElementById('captcha
Input')
.value;
// 验证用户名不能为纯数字
if (/^\d+$/
.test(username)) {
alert('用户名不能为纯数字');
return;
}
// 验证密码长度至少6位
if (password
.length < 4) {
alert('密码长度至少4位');
return;
}
// 验证验证码
if (captcha
Input !==
document
.getElementById('captcha')
.textContent) {
alert('验证码错误');
return;
}
// 显示加载动画
const submitBtn =
document
.query
Selector('button[type="submit"]');
const orig
inalBtnText = submitBtn
.innerHTML;
submitBtn
.disabled = true;
submitBtn
.innerHTML = '<span class="sp
inner
-border sp
inner
-border
-sm" role="status" aria
-hidden="true"></span> 登录中
...';
// 发送登录请求到json
-server
fetch('http://localhost:3000/users?username=' + username + '&password=' + password)
.then(response => response
.json())
.then(data => {
if (data
.length > 0) {
// 登录成功，跳转到主页面并传递用户名
w
indow
.location
.href = 'ma
in.html?username=' + encodeURIComponent(username);
} else {
alert('用户名或密码错误');
submitBtn
.disabled = false;
submitBtn
.innerHTML = orig
inalBtnText;
}
})
.catch(error => {
console
.error('Error:', error);
alert('登录失败，请稍后重试');
submitBtn
.disabled = false;
submitBtn
.innerHTML = orig
inalBtnText;
});
});
</script>
</body>
</html>为什么注册请求成功后不能成功跳转回log
in.html
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
扫一扫
2691
