회원가입 유효성 검사

 

 

유효성 검사를 할때는 함수를 하나 만들고 그 안에 다 때려 박아서 함.

 

여태껏 많은 블로그들을 돌아보았고, 너무 오래된 것들이라 정보 찾기가 힘들었는데, 많은 분들의 도움을 받아 해냈다.

 

우선 여타 블로그들의 경우 사용한 방식은

button의 type을 submit에서 button으로 바꾼 이후 script 에서 onclick을 이용해 작동 시키는 방식을 많이 사용했는데,

이는 input에 값을 입력하고 엔터를 치면 서브밋이 되어버리는 문제가 생겼다. 

오로지 회원가입 버튼으로만 한다면 모를까, 엔터를 쳐버리면 action이 동작해버리니 큰 문제였다.

해당 문제를 해결하기 위해 엔터기능을 막는 방안을 이용했어야 했는데, 해당 기능을 구현하지 못하였고, 구현과정에서 계속 오류가 나서 만들기를 실패했다. 

 

그런데 form에 onsubmit = "return joinform_check()"를 줘서 submit을 작동 시키는 방식이 있었고, 이 방법이 훨씬 편했다.

 

onsubmit은 사용자가 input 에 값을 입력하고, form을 통해 값을 보내 action의 경로로 진입하기 직전! 바로 그 타이밍에 동작하는 이벤트핸들러이다.

 

onsubmit = return false 를 하게되면 false 라는 거짓값이 return(돌아오다)하게 되는데, 그러면 action이 작동하지 못하고 현재페이지에 머물게 된다. 이를 이용하여, onsubmit = "return joinform_check()"를 동작시키고 유효성 검사 함수인  joinform_check()의 결과값이 true 이면 정상적으로 action이 작동하게 만들고, false 이면  action이 작동하지 못하게 하여 현재페이지에 머물게 할 수 있다.

 

 

 

ex) 유효성 테스트를 위한 함수. 이름만 입력받는다는 가정을 했을때.

function joinform_check() {

  const uname = document.querySelector('#name'); //이름 파라미터의 값를 가져옴.

  const regName = /^[가-힣]{2,30}$/; // 이름 규칙

  let checkAll = true; // 유효성 검사 결과 최종 값이 들어갈 곳. 기본값 true

  if (!regName.test(uname.value)) { // 이름 규칙 확인

    alert("이름은 한글 2~30자 이내로 작성해주세요."); // 창띄우기

    uname.focus(); // 이름으로 돌아가기

    checkAll = false;

  }

  if(!checkAll){

    return false;

  }

}