qing/micro_servers
1
3 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 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;
}
static/public/login.html
+40 -39
View File
@@ -1,47 +1,48 @@
<!DOCTYPE html>
<html>
<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">
<title>登录</title>
<style>
.tip-red {color:red;}
.tip-yellow {color: orange;}
.tip-green {color: greenyellow;}
<title>登录</title>
<style>
.tip-red {color:red;}
.tip-yellow {color: orange;}
.tip-green {color: greenyellow;}
</style>
</head>
<body>
<h2>用户登录</h2>
<form action="" id="form" method="post">
<div>
<label>用户名/推荐邮箱：</label>
<input type="text" id="loginUsername" name="username" placeholder="请输入用户名">
<span id="msgTip" ></span>
<br>
<label>密码：</label>
<input type="password" id="loginPassword" name="password" placeholder="请输入密码">
<span id="pwdTip"></span>
</div>
<div>
<label>验证邮箱：</label>
<input type="email" id="loginEmail" name="email" placeholder="请输入验证邮箱">
<span id="emlSub">
<input type="submit" value="发送验证码">
</span>
<span id="emlTip"></span>
</div>
<div>
<button type="button" id="registerBtn">注册</button>
<input type="submit" id="loginBtn" value="登录">
<input type="reset" id="resetUser" value="重置">
</div>
<div>
<input type="checkbox" id="agreeBox" name="agree" value="access">
<label id="agreement">同意该系统相关用户使用条例</label>
<span id="agreeTip"></span>
</div>
</form>
<body>
<h2>用户登录</h2>
<form action="" id="form" method="post">
<div>
<label>用户名/推荐邮箱：</label>
<input type="text" id="loginUsername" name="username" placeholder="请输入用户名">
<span id="msgTip" ></span>
<br>
<label>密码：</label>
<input type="password" id="loginPassword" name="password" placeholder="请输入密码">
<span id="pwdTip"></span>
</div>
<div>
<label>验证邮箱：</label>
<input type="email" id="loginEmail" name="email" placeholder="请输入验证邮箱">
<span id="emlSub">
<input type="submit" value="发送验证码">
</span>
<span id="emlTip"></span>
</div>
<div>
<button type="button" id="registerBtn">注册</button>
<input type="submit" id="loginBtn" value="登录">
<input type="reset" id="resetUser" value="重置">
</div>
<div>
<input type="checkbox" id="agreeBox" name="agree" value="access">
<label id="agreement">同意该系统相关用户使用条例</label>
<span id="agreeTip"></span>
</div>
</form>
<script src="js/validation.js"></script>
<script src="js/login.js"></script>
</body>
</html>
</html>