AaronXu
105 lines
3.3 KiB
HTML
105 lines
3.3 KiB
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>
|
|
<link rel="stylesheet" href="css/style.css">
|
|
</head>
|
|
<body>
|
|
|
|
<nav class="navbar">
|
|
<a class="navbar-brand" href="index.html">
|
|
<span class="logo-icon">📝</span>
|
|
笔记小站
|
|
</a>
|
|
<div class="navbar-actions" id="navbarActions"></div>
|
|
</nav>
|
|
|
|
<div class="modal-overlay" style="position:relative;background:var(--bg);min-height:calc(100vh - 64px);display:flex;align-items:center;justify-content:center;">
|
|
<div class="login-modal anim-scale-in" style="position:relative;max-width:440px;">
|
|
<h2>✍️ 注册账号</h2>
|
|
<p class="subtitle">创建账号，开始你的笔记之旅</p>
|
|
<div class="form-group">
|
|
<label>用户名</label>
|
|
<input type="text" id="regUsername" placeholder="请输入用户名" autofocus>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>邮箱</label>
|
|
<input type="email" id="regEmail" placeholder="请输入邮箱地址">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>密码</label>
|
|
<input type="password" id="regPassword" placeholder="请输入密码（至少6位）">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>确认密码</label>
|
|
<input type="password" id="regPassword2" placeholder="请再次输入密码">
|
|
</div>
|
|
<button class="btn btn-primary" onclick="doRegister()">注册</button>
|
|
<div class="login-hint">
|
|
已有账号？<a href="login.html" style="color:var(--primary);text-decoration:none;font-weight:600;">立即登录</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="toast-container" id="toastContainer"></div>
|
|
|
|
<script src="js/common.js"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () { renderNavbar(); });
|
|
|
|
window.doRegister = function () {
|
|
var username = document.getElementById('regUsername').value.trim();
|
|
var email = document.getElementById('regEmail').value.trim();
|
|
var password = document.getElementById('regPassword').value.trim();
|
|
var password2 = document.getElementById('regPassword2').value.trim();
|
|
|
|
if (!username || !email || !password || !password2) {
|
|
showToast('请填写所有字段', 'error');
|
|
return;
|
|
}
|
|
if (password.length < 6) {
|
|
showToast('密码至少需要 6 位', 'error');
|
|
return;
|
|
}
|
|
if (password !== password2) {
|
|
showToast('两次密码输入不一致', 'error');
|
|
return;
|
|
}
|
|
|
|
// fetch是一个异步函数，用于发送HTTP请求
|
|
fetch('/function/user.php', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
'action': 'register',
|
|
'username': username,
|
|
'email': email,
|
|
'password': password
|
|
})
|
|
})
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
if (data.code === 0) {
|
|
showToast('注册成功', 'success');
|
|
setTimeout(() => {
|
|
location.href = 'login.html';
|
|
}, 1000);
|
|
} else {
|
|
showToast(data.message, 'error');
|
|
}
|
|
})
|
|
.catch(err => {
|
|
showToast(err.message, 'error');
|
|
});
|
|
};
|
|
|
|
['regUsername','regEmail','regPassword','regPassword2'].forEach(function (id) {
|
|
var el = document.getElementById(id);
|
|
if (el) el.addEventListener('keydown', function (e) { if (e.key === 'Enter') doRegister(); });
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|