과거 프로그래밍 자료들/프로젝트
form내 action 경로가 실행되기 전 onSubmit 사용하기
평부
2022. 9. 7. 17:42
* 상황
- form태그에서 지정한 경로로 정보를 보내기 전 유효성 검사 필요(각각 이메일, 닉네임, 비밀번호)
- form 태그 내 onsubmit을 이용함
* 참고한 블로그
https://180bpm.tistory.com/95
https://b.redinfo.co.kr/43
[Front]
- action으로 지정한 경로가 전송되기 전 onSubmit에서 지정한 함수 실행하기
//onsubmit에서 지정 시 return을 앞에 붙일 것
<form id="join-form" onsubmit="return checkAll();" action="/auth/join" method="post">
<div class="input-group">
<label for="join-email">이메일</label>
<input id="join-email" type="email" name="email" class="email" placeholder="ex) test@naver.com">
</div>
<div class="input-group">
<label for="join-nick">닉네임</label>
<input id="join-nick" type="text" name="nickname" class="nickname" placeholder="영어 또는 한글만 입력">
</div>
<div class="input-group">
<label for="join-password">비밀번호</label>
<input id="join-password" type="password" name="password" class="password" placeholder="영어와 숫자 4~12자 입력">
</div>
<button id="join-btn" type="submit" class="btn">회원가입</button>
</form>
function checkAll() {
const check_submit = confirm("회원가입 하시겠습니까?");
if (check_submit) {
//class값으로 value값 찾음
const email = document.querySelector(".email").value;
const nickname = document.querySelector(".nickname").value;
const password = document.querySelector('.password').value;
//정규식 사용
const emailReg = /^[A-Za-z0-9_]+[A-Za-z0-9]*[@]{1}[A-Za-z0-9]+[A-Za-z0-9]*[.]{1}[A-Za-z]{1,3}$/;
const nicknameReg = /([가-힣a-zA-Z]+$)/;
const passwordReg = /^[a-zA-z0-9]{4,12}$/;
if (!emailReg.test(email)) {
alert("이메일 관련 오류가 있습니다.");
return false;
}
if (!nicknameReg.test(nickname)) {
alert("닉네임은 영어 또는 한글만 입력하세요.");
return false;
}
if (!passwordReg.test(password)) {
alert("비밀번호는 영어와 숫자 4~12자 입력하세요.");
return false;
}
}
return check_submit;
}
[Back]
router.post("/join", isNotLoggedIn, async (req, res, next) => {
const { email, nickname, password } = req.body;
try {
const exUser = await User.findOne({ where: { email } });
console.log(exUser);
if (exUser) {
return res.redirect("/join?error=exist");
}
const hash = await bcrypt.hash(password, 12);
await User.create({
email,
nickname,
password: hash,
});
return res.redirect("/login");
} catch (error) {
console.log(error);
return next(error);
}
});