form내 action 경로가 실행되기 전 onSubmit 사용하기

 

* 상황

- form태그에서 지정한 경로로 정보를 보내기 전 유효성 검사 필요(각각 이메일, 닉네임, 비밀번호)

- form 태그 내 onsubmit을 이용함 

 

 

* 참고한 블로그

https://olsh1108o.tistory.com/entry/JS-%ED%9A%8C%EC%9B%90%EA%B0%80%EC%9E%85-%EC%9C%A0%ED%9A%A8%EC%84%B1-%EA%B2%80%EC%82%AC

[JS] 회원가입 유효성 검사

https://180bpm.tistory.com/95

자주 쓰이는 정규표현식

https://b.redinfo.co.kr/43

form 요소 에서 submit 의 return 값을 컨트롤 하기

 

[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);
  }
});