Files
WebWork/frontend/html/register.html
2025-12-21 21:50:37 +08:00

106 lines
4.2 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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<div class="auth-container">
<div class="auth-header">
<h1><i class="fas fa-graduation-cap"></i> 学生成绩管理系统</h1>
<p>创建新账户</p>
</div>
<div class="auth-card">
<form id="registerForm">
<div class="form-group">
<label for="id">
<i class="fas fa-id-card"></i> 学号/工号
</label>
<input type="text" id="id" name="id" required
placeholder="请输入学号或工号">
</div>
<div class="form-group">
<label for="name">
<i class="fas fa-user"></i> 姓名
</label>
<input type="text" id="name" name="name" required
placeholder="请输入姓名">
</div>
<div class="form-group">
<label for="password">
<i class="fas fa-lock"></i> 密码
</label>
<input type="password" id="password" name="password" required
placeholder="请输入密码">
</div>
<div class="form-group">
<label for="confirmPassword">
<i class="fas fa-lock"></i> 确认密码
</label>
<input type="password" id="confirmPassword" name="confirmPassword" required
placeholder="请再次输入密码">
</div>
<div class="form-group">
<label for="role">
<i class="fas fa-user-tag"></i> 角色
</label>
<select id="role" name="role" required>
<option value="">请选择角色</option>
<option value="student">学生</option>
<option value="teacher">教师</option>
<option value="admin">管理员</option>
</select>
</div>
<div class="form-group" id="classField" style="display: none;">
<label for="class">
<i class="fas fa-users"></i> 班级
</label>
<input type="text" id="class" name="class"
placeholder="请输入班级(学生/教师必填)">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">
<i class="fas fa-user-plus"></i> 注册
</button>
</div>
<div class="auth-footer">
<p>已有账户? <a href="login.html">立即登录</a></p>
</div>
</form>
</div>
<script src="../js/auth.js"></script>
<script>
// 显示/隐藏班级字段
document.getElementById('role').addEventListener('change', function() {
const role = this.value;
const classField = document.getElementById('classField');
const classInput = document.getElementById('class');
if (role === 'student' || role === 'teacher') {
classField.style.display = 'block';
classInput.required = true;
} else {
classField.style.display = 'none';
classInput.required = false;
}
});
// 初始化AuthManager
document.addEventListener('DOMContentLoaded', () => {
new AuthManager();
});
</script>
</body>
</html>