qing/blackbird
3
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

引入validation.js，修改Content-Type

Browse Source
This commit is contained in:
qing committed 2026-07-21 21:55:52 +08:00
1 parent b1f0aec4ab
commit 1d57502fa2
2 files changed
+149 -148
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

static/public/js/login.js
+109 -109
View File
@@ -1,40 +1,40 @@
const msgTip = document.getElementById('msgTip'); const msgTip = document.getElementById('msgTip');
const pwdTip = document.getElementById('pwdTip'); const pwdTip = document.getElementById('pwdTip');
const emlTip = document.getElementById('emlTip'); const emlTip = document.getElementById('emlTip');
const agreeTip = document.getElementById('agreeTip'); const agreeTip = document.getElementById('agreeTip');
const form = document.getElementById('form'); const form = document.getElementById('form');
const usernameInput = document.getElementById('loginUsername'); const usernameInput = document.getElementById('loginUsername');
const passwordInput = document.getElementById('loginPassword'); const passwordInput = document.getElementById('loginPassword');
const emailInput = document.getElementById('loginEmail'); const emailInput = document.getElementById('loginEmail');
const agreeBox = document.getElementById('agreeBox'); const agreeBox = document.getElementById('agreeBox');
const protocol = document.getElementById('agreement'); const protocol = document.getElementById('agreement');
const resetUser = document.getElementById('resetUser'); const resetUser = document.getElementById('resetUser');
const registerBtn = document.getElementById('registerBtn'); const registerBtn = document.getElementById('registerBtn');
const loginButton = document.getElementById('loginBtn'); const loginButton = document.getElementById('loginBtn');
resetUser.addEventListener('click', function() { resetUser.addEventListener('click', function() {
clearTipStyle(); clearTipStyle();
}); });
function clearTipStyle() { function clearTipStyle() {
msgTip.innerHTML = ''; msgTip.innerHTML = '';
pwdTip.innerHTML = ''; pwdTip.innerHTML = '';
agreeTip.innerHTML = ''; agreeTip.innerHTML = '';
emlTip.innerHTML = ''; emlTip.innerHTML = '';
msgTip.classList.remove('tip-red', 'tip-yellow', 'tip-green'); msgTip.classList.remove('tip-red', 'tip-yellow', 'tip-green');
pwdTip.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'); agreeTip.classList.remove('tip-red', 'tip-yellow', 'tip-green');
emlTip.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-red');
protocol.classList.remove('tip-green'); protocol.classList.remove('tip-green');
} }
clearTipStyle(); clearTipStyle();
/** /**
* @returns {string|false} * @returns {string|false}
*/ */
function checkUsername() { function checkUsername() {
const result = FormValidators.username(usernameInput.value); const result = FormValidators.username(usernameInput.value);
msgTip.innerHTML = ''; msgTip.innerHTML = '';
@@ -42,11 +42,11 @@ function checkUsername() {
msgTip.textContent = result.message; msgTip.textContent = result.message;
msgTip.classList.add(result.className); msgTip.classList.add(result.className);
return result.valid ? result.value : false; return result.valid ? result.value : false;
} }
/** /**
* @returns {string|false} * @returns {string|false}
*/ */
function checkPwd() { function checkPwd() {
const result = FormValidators.password(passwordInput.value); const result = FormValidators.password(passwordInput.value);
pwdTip.innerHTML = ''; pwdTip.innerHTML = '';
@@ -54,11 +54,11 @@ function checkPwd() {
pwdTip.textContent = result.message; pwdTip.textContent = result.message;
pwdTip.classList.add(result.className); pwdTip.classList.add(result.className);
return result.valid ? result.value : false; return result.valid ? result.value : false;
} }
/** /**
* @returns {string|false} * @returns {string|false}
*/ */
function checkEml() { function checkEml() {
const result = FormValidators.email(emailInput.value); const result = FormValidators.email(emailInput.value);
emlTip.innerHTML = ''; emlTip.innerHTML = '';
@@ -66,71 +66,71 @@ function checkEml() {
emlTip.textContent = result.message; emlTip.textContent = result.message;
emlTip.classList.add(result.className); emlTip.classList.add(result.className);
return result.valid ? result.value : false; return result.valid ? result.value : false;
} }
/** /**
* @returns {boolean} * @returns {boolean}
*/ */
function checkAgree() { function checkAgree() {
agreeTip.innerHTML = ''; agreeTip.innerHTML = '';
agreeTip.classList.remove('tip-red'); agreeTip.classList.remove('tip-red');
protocol.classList.remove('tip-green', 'tip-red'); protocol.classList.remove('tip-green', 'tip-red');
if (!agreeBox.checked) { if (!agreeBox.checked) {
agreeTip.innerHTML = '请同意用户协议！'; agreeTip.innerHTML = '请同意用户协议！';
agreeTip.classList.add('tip-red'); agreeTip.classList.add('tip-red');
protocol.classList.add('tip-red'); protocol.classList.add('tip-red');
return false; return false;
} }
protocol.classList.add('tip-green'); protocol.classList.add('tip-green');
return true; return true;
} }
usernameInput.addEventListener('focus', checkUsername); usernameInput.addEventListener('focus', checkUsername);
passwordInput.addEventListener('focus', checkPwd); passwordInput.addEventListener('focus', checkPwd);
usernameInput.addEventListener('input', checkUsername); usernameInput.addEventListener('input', checkUsername);
passwordInput.addEventListener('input', checkPwd); passwordInput.addEventListener('input', checkPwd);
usernameInput.addEventListener('blur', checkUsername); usernameInput.addEventListener('blur', checkUsername);
passwordInput.addEventListener('blur', checkPwd); passwordInput.addEventListener('blur', checkPwd);
emailInput.addEventListener('focus', checkEml); emailInput.addEventListener('focus', checkEml);
emailInput.addEventListener('input', checkEml); emailInput.addEventListener('input', checkEml);
emailInput.addEventListener('blur', checkEml); emailInput.addEventListener('blur', checkEml);
agreeBox.addEventListener('change', checkAgree); agreeBox.addEventListener('change', checkAgree);
registerBtn.addEventListener('click', function() { registerBtn.addEventListener('click', function() {
location.href = 'register.html'; location.href = 'register.html';
}); });
form.addEventListener('submit', async function(e) { form.addEventListener('submit', async function(e) {
e.preventDefault(); e.preventDefault();
clearTipStyle(); clearTipStyle();
const userOk = checkUsername(); const userOk = checkUsername();
const pwdOk = checkPwd(); const pwdOk = checkPwd();
const emlOk = checkEml(); const emlOk = checkEml();
const agreeOk = checkAgree(); const agreeOk = checkAgree();
if (!(userOk && pwdOk && emlOk && agreeOk)) { if (!(userOk && pwdOk && emlOk && agreeOk)) {
return; return;
} }
const jsonBody = JSON.stringify({ const jsonBody = JSON.stringify({
username: userOk, username: userOk,
password: pwdOk password: pwdOk
}); });
try { try {
loginButton.disabled = true; loginButton.disabled = true;
const res = await fetch('/login', { const res = await fetch('/login', {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/x-www-form-urlencoded' 'Content-Type': 'application/json' // 告诉服务器内容为json
}, },
body: jsonBody body: jsonBody
}); });
const responseText = await res.text(); const responseText = await res.text();
let result; let result;
@@ -150,15 +150,15 @@ form.addEventListener('submit', async function(e) {
if (!result.data || !result.data.token || !result.data.username) { if (!result.data || !result.data.token || !result.data.username) {
throw new Error('登录成功，但服务器返回的数据不完整'); throw new Error('登录成功，但服务器返回的数据不完整');
} }
alert(`${result.message}，账号：${result.data.username}`); alert(`${result.message}，账号：${result.data.username}`);
sessionStorage.setItem('token', result.data.token); sessionStorage.setItem('token', result.data.token);
location.href = 'main.html'; location.href = 'main.html';
} else { } else {
alert(result.message || '登录失败'); alert(result.message || '登录失败');
} }
} catch (err) { } catch (err) {
alert(err.message || '接口请求失败，请检查后端服务是否启动'); alert(err.message || '接口请求失败，请检查后端服务是否启动');
console.error('登录请求异常：', err); console.error('登录请求异常：', err);
} finally { } finally {
loginButton.disabled = false; loginButton.disabled = false;
} }
static/public/login.html
+40 -39
View File
@@ -1,47 +1,48 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<!-- 移动端适配核心标签 --> <!-- 移动端适配核心标签 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>登录</title> <title>登录</title>
<style> <style>
.tip-red {color:red;} .tip-red {color:red;}
.tip-yellow {color: orange;} .tip-yellow {color: orange;}
.tip-green {color: greenyellow;} .tip-green {color: greenyellow;}
</style> </style>
</head> </head>
<body> <body>
<h2>用户登录</h2> <h2>用户登录</h2>
<form action="" id="form" method="post"> <form action="" id="form" method="post">
<div> <div>
<label>用户名/推荐邮箱：</label> <label>用户名/推荐邮箱：</label>
<input type="text" id="loginUsername" name="username" placeholder="请输入用户名"> <input type="text" id="loginUsername" name="username" placeholder="请输入用户名">
<span id="msgTip" ></span> <span id="msgTip" ></span>
<br> <br>
<label>密码：</label> <label>密码：</label>
<input type="password" id="loginPassword" name="password" placeholder="请输入密码"> <input type="password" id="loginPassword" name="password" placeholder="请输入密码">
<span id="pwdTip"></span> <span id="pwdTip"></span>
</div> </div>
<div> <div>
<label>验证邮箱：</label> <label>验证邮箱：</label>
<input type="email" id="loginEmail" name="email" placeholder="请输入验证邮箱"> <input type="email" id="loginEmail" name="email" placeholder="请输入验证邮箱">
<span id="emlSub"> <span id="emlSub">
<input type="submit" value="发送验证码"> <input type="submit" value="发送验证码">
</span> </span>
<span id="emlTip"></span> <span id="emlTip"></span>
</div> </div>
<div> <div>
<button type="button" id="registerBtn">注册</button> <button type="button" id="registerBtn">注册</button>
<input type="submit" id="loginBtn" value="登录"> <input type="submit" id="loginBtn" value="登录">
<input type="reset" id="resetUser" value="重置"> <input type="reset" id="resetUser" value="重置">
</div> </div>
<div> <div>
<input type="checkbox" id="agreeBox" name="agree" value="access"> <input type="checkbox" id="agreeBox" name="agree" value="access">
<label id="agreement">同意该系统相关用户使用条例</label> <label id="agreement">同意该系统相关用户使用条例</label>
<span id="agreeTip"></span> <span id="agreeTip"></span>
</div> </div>
</form> </form>
<script src="js/validation.js"></script>
<script src="js/login.js"></script> <script src="js/login.js"></script>
</body> </body>
</html> </html>