<h2>註冊</h2>
<form action="" class="form1">
帳號:
<input type="text" class="acc1">
<br>
密碼:
<input type="text" class="pass1">
<br>
<input type="button" value="送出" class="send">
</form>
<br>
<h2>登入</h2>
<form action="" class="form2">
帳號:
<input type="text" class="acc2">
<br>
密碼:
<input type="text" class="pass2">
<br>
<input type="button" value="登入" class="login">
</form>
//註冊功能 傳送post資料做驗證
//DOM
const account = document.querySelector(".acc1");
const password = document.querySelector(".pass1");
const form = document.querySelector(".form1");
const send = document.querySelector(".send");
//登入dom
const accLogin = document.querySelector(".acc2");
const passLogin = document.querySelector(".pass2");
const formLogin = document.querySelector(".form2");
const login = document.querySelector(".login");
//使用者資料
let usersList = []
const errMess = function(acc, pass) {
//做錯誤判斷
if(acc.value === "" || pass.value === "") {
alert('輸入資料不可為空,請重新輸入');
form.reset();
return true;
} else {
return false;
}
}
//把axios post請求用函式封裝起來等待click事件發生後,才觸發post請求驗證
const requestData = function () {
//做錯誤判斷
if(errMess(account, password)) return;
// if(errMess(account, password)) return;
// if(account.value === "" || password.value === "") {
// alert('輸入資料不可為空,請重新輸入');
// form.reset();
// return;
// }
//擷取使用者註冊資料
let obj = {};
obj.email = account.value;
obj.password = password.value;
usersList.push(obj);
//axios送出post請求
axios
.post("https://hexschool-tutorial.herokuapp.com/api/signup", obj)
.then((response) => {
if(response.data.message === "帳號註冊成功") {
console.log(response.config.data)
alert("恭喜帳號註冊成功");
} else {
alert("帳號註冊失敗");
}
form.reset();
})
.catch((err) => {
console.err(err);
});
};
//把axios post請求用函式封裝起來等待click login事件發生後,才觸發post請求驗證是否有資料
const loginRequest = function () {
//預作錯誤判斷
if(errMess(accLogin, passLogin)) return;
//取的使用者輸入的資料
let user = {};
user.email = accLogin.value;
user.password = passLogin.value;
axios.post('https://hexschool-tutorial.herokuapp.com/api/signin', user)
.then(res => {
if(res.data.message === '登入成功') {
console.log(res.config.data);
alert('登入成功');
} else {
alert('登入失敗');
}
formLogin.reset()
})
.catch((err) => {
console.err(err);
});
}
//當使用者在欄位輸入資料時,按下送出後
//才發生註冊資料-請求(evevt-click)
send.addEventListener('click', (e) => {
e.preventDefault();
//obj要作為post的參數送出去驗證
requestData();
})
//觸發登入-click
login.addEventListener('click', (e) => {
e.preventDefault();
//obj要作為post的參數送出去驗證是否存在在資料庫
loginRequest();
})
This Pen doesn't use any external CSS resources.