init
This commit is contained in:
commit
70d467d052
97 files changed
+10386
No files matched your search
@@ -0,0 +1,204 @@
|
||||
const msgTip = document.getElementById('msgTip');
|
||||
const pwdTip = document.getElementById('pwdTip');
|
||||
const emlTip = document.getElementById('emlTip');
|
||||
const agreeTip = document.getElementById('agreeTip');
|
||||
const form = document.getElementById('form');
|
||||
|
||||
const usernameInput = document.getElementById('loginUsername');
|
||||
const passwordInput = document.getElementById('loginPassword');
|
||||
const emailInput = document.getElementById('loginEmail');
|
||||
const agreeBox = document.getElementById('agreeBox');
|
||||
const protocol = document.getElementById('agreement');
|
||||
const submit = document.getElementById('loginBtn');
|
||||
|
||||
const resetUser = document.getElementById('resetUser');
|
||||
const registerBtn = document.getElementById('registerBtn');
|
||||
|
||||
resetUser.addEventListener('click', function() {
|
||||
clearTipStyle();
|
||||
})
|
||||
|
||||
function clearTipStyle() {
|
||||
msgTip.innerHTML = '';
|
||||
pwdTip.innerHTML = '';
|
||||
agreeTip.innerHTML = '';
|
||||
emlTip.innerHTML = '';
|
||||
|
||||
msgTip.classList.remove('tip-red', 'tip-yellow', 'tip-green');
|
||||
pwdTip.classList.remove('tip-red', 'tip-yellow', 'tip-green');
|
||||
agreeTip.classList.remove('tip-red', 'tip-yellow', 'tip-green');
|
||||
emlTip.classList.remove('tip-red', 'tip-yellow', 'tip-green');
|
||||
protocol.classList.remove('tip-red');
|
||||
protocol.classList.remove('tip-green');
|
||||
}
|
||||
clearTipStyle();
|
||||
|
||||
/**
|
||||
* @returns {string|false}
|
||||
*/
|
||||
function checkUsername() {
|
||||
const val = usernameInput.value.trim();
|
||||
msgTip.innerHTML = '';
|
||||
msgTip.classList.remove('tip-red', 'tip-yellow', 'tip-green');
|
||||
|
||||
if (!val) {
|
||||
msgTip.innerHTML = '用户名不可为空';
|
||||
msgTip.classList.add('tip-red');
|
||||
return false;
|
||||
}
|
||||
if (val.length > 20) {
|
||||
msgTip.innerHTML = '用户名不得长于20字符!';
|
||||
msgTip.classList.add('tip-yellow');
|
||||
return false;
|
||||
}
|
||||
|
||||
msgTip.innerHTML = '√ 用户名格式正确';
|
||||
msgTip.classList.add('tip-green');
|
||||
return val;
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {string|false}
|
||||
*/
|
||||
function checkPwd() {
|
||||
const val = passwordInput.value.trim();
|
||||
pwdTip.innerHTML = '';
|
||||
pwdTip.classList.remove('tip-red', 'tip-yellow', 'tip-green');
|
||||
|
||||
if (!val) {
|
||||
pwdTip.innerHTML = '密码不可为空!';
|
||||
pwdTip.classList.add('tip-red');
|
||||
return false;
|
||||
}
|
||||
|
||||
pwdTip.innerHTML = '河狸';
|
||||
pwdTip.classList.add('tip-green');
|
||||
return val;
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {string|false}
|
||||
*/
|
||||
function checkEml() {
|
||||
const val = emailInput.value.trim();
|
||||
const emlStand = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
|
||||
emlTip.innerHTML = '';
|
||||
emlTip.classList.remove('tip-red', 'tip-yellow', 'tip-green');
|
||||
|
||||
if (!val) {
|
||||
emlTip.innerHTML = '邮箱不可为空!';
|
||||
emlTip.classList.add('tip-red');
|
||||
return false;
|
||||
} else if (!emlStand.test(val)) {
|
||||
emlTip.innerHTML = '邮箱格式不正确!';
|
||||
emlTip.classList.add('tip-yellow');
|
||||
return false;
|
||||
}
|
||||
|
||||
emlTip.innerHTML = '河狸';
|
||||
emlTip.classList.add('tip-green');
|
||||
return val;
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {boolean}
|
||||
*/
|
||||
function checkAgree() {
|
||||
agreeTip.innerHTML = '';
|
||||
agreeTip.classList.remove('tip-red');
|
||||
protocol.classList.remove('tip-green', 'tip-red');
|
||||
if (!agreeBox.checked) {
|
||||
agreeTip.innerHTML = '请同意用户协议!';
|
||||
agreeTip.classList.add('tip-red');
|
||||
protocol.classList.add('tip-red');
|
||||
return false;
|
||||
}
|
||||
protocol.classList.add('tip-green');
|
||||
return true;
|
||||
}
|
||||
|
||||
usernameInput.addEventListener('focus', checkUsername);
|
||||
passwordInput.addEventListener('focus', checkPwd);
|
||||
|
||||
usernameInput.addEventListener('input', checkUsername);
|
||||
passwordInput.addEventListener('input', checkPwd);
|
||||
|
||||
usernameInput.addEventListener('blur', checkUsername);
|
||||
passwordInput.addEventListener('blur', checkPwd);
|
||||
|
||||
emailInput.addEventListener('focus', checkEml);
|
||||
emailInput.addEventListener('input', checkEml);
|
||||
emailInput.addEventListener('blur', checkEml);
|
||||
|
||||
agreeBox.addEventListener('change', checkAgree);
|
||||
|
||||
registerBtn.addEventListener('click', function() {
|
||||
location.href = 'register.html';
|
||||
})
|
||||
|
||||
/**
|
||||
* @param {string}
|
||||
* @returns {string}
|
||||
*/
|
||||
function htmlEscape(str) {
|
||||
if (typeof str !== 'string') return str;
|
||||
return str
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, ''');
|
||||
}
|
||||
|
||||
form.addEventListener('submit', async function(e) {
|
||||
e.preventDefault();
|
||||
clearTipStyle();
|
||||
|
||||
const userOk = checkUsername();
|
||||
const pwdOk = checkPwd();
|
||||
const emlOk = checkEml();
|
||||
const agreeOk = checkAgree();
|
||||
|
||||
if (!(userOk && pwdOk && emlOk && agreeOk)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const jsonBody = JSON.stringify({
|
||||
username: userOk,
|
||||
password: pwdOk
|
||||
});
|
||||
|
||||
try {
|
||||
const res = await fetch('/login', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded'
|
||||
},
|
||||
body: jsonBody
|
||||
});
|
||||
|
||||
const responseText = await res.text();
|
||||
let result;
|
||||
|
||||
try {
|
||||
result = JSON.parse(responseText);
|
||||
} catch (err) {
|
||||
throw new Error(`服务器返回了非 JSON 内容(HTTP ${res.status}):${responseText.slice(0, 100)}`);
|
||||
}
|
||||
|
||||
if (!res.ok) {
|
||||
throw new Error(result.message || `登录失败(HTTP ${res.status})`);
|
||||
}
|
||||
|
||||
if (result.code === 0) {
|
||||
alert(`${result.message},账号:${result.data.username}`);
|
||||
sessionStorage.setItem('token', result.data.token);
|
||||
location.href = 'main.html';
|
||||
} else {
|
||||
alert(result.message || '登录失败');
|
||||
}
|
||||
} catch (err) {
|
||||
alert(err.message || '接口请求失败,请检查后端服务是否启动');
|
||||
console.error('登录请求异常:', err);
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,73 @@
|
||||
let sendCode = "";
|
||||
let codeTarget = "";
|
||||
|
||||
getCode.onclick = function () {
|
||||
const phoneMail = email.value.trim();
|
||||
|
||||
if (phoneMail === "") {
|
||||
alert("请先填写邮箱号!");
|
||||
return;
|
||||
}
|
||||
|
||||
sendCode = Math.floor(100000 + Math.random() * 900000).toString();
|
||||
codeTarget = phoneMail;
|
||||
|
||||
alert(`验证码已发送至 ${phoneMail},您的验证码:${sendCode}`);
|
||||
};
|
||||
|
||||
regForm.onsubmit = function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
const uname = username.value.trim();
|
||||
const emailVal = email.value.trim();
|
||||
const codeVal = code.value.trim();
|
||||
const pwdVal = psw.value;
|
||||
const repwdVal = repwd.value;
|
||||
|
||||
if (uname === "") {
|
||||
alert("请填写用户名");
|
||||
return;
|
||||
}
|
||||
|
||||
if (emailVal === "") {
|
||||
alert("请填写邮箱号");
|
||||
return;
|
||||
}
|
||||
|
||||
if (sendCode === "") {
|
||||
alert("请先点击获取验证码!");
|
||||
return;
|
||||
}
|
||||
|
||||
if (emailVal !== codeTarget) {
|
||||
alert("邮箱已修改,请重新获取验证码!");
|
||||
sendCode = "";
|
||||
return;
|
||||
}
|
||||
|
||||
if (!/^\d{6}$/.test(codeVal)) {
|
||||
alert("验证码必须是6位数字");
|
||||
return;
|
||||
}
|
||||
|
||||
if (codeVal !== sendCode) {
|
||||
alert("验证码错误,请核对!");
|
||||
code.value = "";
|
||||
return;
|
||||
}
|
||||
|
||||
if (pwdVal.length < 6) {
|
||||
alert("密码至少6位字符");
|
||||
return;
|
||||
}
|
||||
|
||||
if (pwdVal !== repwdVal) {
|
||||
alert("两次输入的密码不一致");
|
||||
return;
|
||||
}
|
||||
|
||||
alert("注册成功!");
|
||||
regForm.reset();
|
||||
sendCode = "";
|
||||
codeTarget = "";
|
||||
};
|
||||
Reference in new issue
Block a user