引入validation.js，修改Content-Type
This commit is contained in:
qing committed
1 parent
b1f0aec4ab
commit
1d57502fa2
2 files changed
+149
-148
No files matched your search
+109
-109
@@ -1,40 +1,40 @@
|
||||
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 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 resetUser = document.getElementById('resetUser');
|
||||
const registerBtn = document.getElementById('registerBtn');
|
||||
const loginButton = document.getElementById('loginBtn');
|
||||
|
||||
resetUser.addEventListener('click', function() {
|
||||
clearTipStyle();
|
||||
|
||||
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 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 result = FormValidators.username(usernameInput.value);
|
||||
msgTip.innerHTML = '';
|
||||
@@ -42,11 +42,11 @@ function checkUsername() {
|
||||
msgTip.textContent = result.message;
|
||||
msgTip.classList.add(result.className);
|
||||
return result.valid ? result.value : false;
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {string|false}
|
||||
*/
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {string|false}
|
||||
*/
|
||||
function checkPwd() {
|
||||
const result = FormValidators.password(passwordInput.value);
|
||||
pwdTip.innerHTML = '';
|
||||
@@ -54,11 +54,11 @@ function checkPwd() {
|
||||
pwdTip.textContent = result.message;
|
||||
pwdTip.classList.add(result.className);
|
||||
return result.valid ? result.value : false;
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {string|false}
|
||||
*/
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {string|false}
|
||||
*/
|
||||
function checkEml() {
|
||||
const result = FormValidators.email(emailInput.value);
|
||||
emlTip.innerHTML = '';
|
||||
@@ -66,71 +66,71 @@ function checkEml() {
|
||||
emlTip.textContent = result.message;
|
||||
emlTip.classList.add(result.className);
|
||||
return result.valid ? result.value : false;
|
||||
}
|
||||
|
||||
/**
|
||||
* @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';
|
||||
}
|
||||
|
||||
/**
|
||||
* @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';
|
||||
});
|
||||
|
||||
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
|
||||
});
|
||||
|
||||
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 {
|
||||
loginButton.disabled = true;
|
||||
const res = await fetch('/login', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded'
|
||||
},
|
||||
body: jsonBody
|
||||
});
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json' // 告诉服务器内容为json
|
||||
},
|
||||
body: jsonBody
|
||||
});
|
||||
|
||||
const responseText = await res.text();
|
||||
let result;
|
||||
@@ -150,15 +150,15 @@ form.addEventListener('submit', async function(e) {
|
||||
if (!result.data || !result.data.token || !result.data.username) {
|
||||
throw new Error('登录成功，但服务器返回的数据不完整');
|
||||
}
|
||||
alert(`${result.message}，账号：${result.data.username}`);
|
||||
sessionStorage.setItem('token', result.data.token);
|
||||
location.href = 'main.html';
|
||||
} else {
|
||||
alert(`${result.message}，账号：${result.data.username}`);
|
||||
sessionStorage.setItem('token', result.data.token);
|
||||
location.href = 'main.html';
|
||||
} else {
|
||||
alert(result.message || '登录失败');
|
||||
}
|
||||
} catch (err) {
|
||||
}
|
||||
} catch (err) {
|
||||
alert(err.message || '接口请求失败，请检查后端服务是否启动');
|
||||
console.error('登录请求异常：', err);
|
||||
console.error('登录请求异常：', err);
|
||||
} finally {
|
||||
loginButton.disabled = false;
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user