141 lines
4.8 KiB
JavaScript
141 lines
4.8 KiB
JavaScript
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;
|
|
}
|
|
});
|
|
});
|