document.addEventListener('DOMContentLoaded', function() { // 密码显示/隐藏切换 const togglePasswordButtons = document.querySelectorAll('.toggle-password'); togglePasswordButtons.forEach(button => { button.addEventListener('click', function() { const passwordField = this.previousElementSibling; const type = passwordField.getAttribute('type') === 'password' ? 'text' : 'password'; passwordField.setAttribute('type', type); // 更改图标 const icon = this.querySelector('i'); if (type === 'text') { icon.classList.remove('fa-eye'); icon.classList.add('fa-eye-slash'); } else { icon.classList.remove('fa-eye-slash'); icon.classList.add('fa-eye'); } }); }); // 密码一致性检查 const passwordInput = document.getElementById('password'); const confirmPasswordInput = document.getElementById('confirm_password'); const passwordMatchMessage = document.getElementById('password-match-message'); function checkPasswordMatch() { if (confirmPasswordInput.value === '') { passwordMatchMessage.textContent = ''; passwordMatchMessage.className = 'form-text'; return; } if (passwordInput.value === confirmPasswordInput.value) { passwordMatchMessage.textContent = '密码匹配'; passwordMatchMessage.className = 'form-text text-success'; } else { passwordMatchMessage.textContent = '密码不匹配'; passwordMatchMessage.className = 'form-text text-danger'; } } passwordInput.addEventListener('input', checkPasswordMatch); confirmPasswordInput.addEventListener('input', checkPasswordMatch); // 发送邮箱验证码 const sendVerificationCodeButton = document.getElementById('sendVerificationCode'); const emailInput = document.getElementById('email'); sendVerificationCodeButton.addEventListener('click', function() { const email = emailInput.value.trim(); // 验证邮箱格式 if (!email) { alert('请输入邮箱地址'); return; } const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailRegex.test(email)) { alert('请输入有效的邮箱地址'); return; } // 禁用按钮,防止重复点击 this.disabled = true; this.textContent = '发送中...'; // 发送AJAX请求 fetch('/user/send_verification_code', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ email: email }), }) .then(response => response.json()) .then(data => { if (data.success) { // 成功发送,开始倒计时 startCountdown(this); alert(data.message); } else { // 发送失败,恢复按钮状态 this.disabled = false; this.textContent = '发送验证码'; alert(data.message || '发送失败,请稍后重试'); } }) .catch(error => { console.error('Error:', error); this.disabled = false; this.textContent = '发送验证码'; alert('发送失败,请稍后重试'); }); }); // 验证码倒计时(60秒) function startCountdown(button) { let seconds = 60; const originalText = '发送验证码'; const countdownInterval = setInterval(() => { seconds--; button.textContent = `${seconds}秒后重发`; if (seconds <= 0) { clearInterval(countdownInterval); button.textContent = originalText; button.disabled = false; } }, 1000); } // 表单提交前验证 const addUserForm = document.getElementById('addUserForm'); addUserForm.addEventListener('submit', function(event) { // 检查密码是否匹配 if (passwordInput.value !== confirmPasswordInput.value) { event.preventDefault(); alert('两次输入的密码不匹配,请重新输入'); return; } // 如果还有其他前端验证,可以继续添加 }); // 自动填充用户名为昵称的默认值 const usernameInput = document.getElementById('username'); const nicknameInput = document.getElementById('nickname'); usernameInput.addEventListener('change', function() { // 只有当昵称字段为空时才自动填充 if (!nicknameInput.value) { nicknameInput.value = this.value; } }); });