[Javascript] 회원가입 시, 패스워드 체크 기능 구현하기

회원가입 페이지는 일반적으로 회원값을 전송하기 전에 자바스크립트(Javascript)에서 폼에 있는 값을 검증한 후, 이상이 없을 경우 페이지에 전송하게 됩니다.

 

Javascript로 패스워드와 패스워드 확인 컬럼을 체크한 후 이상이 없을 경우 폼의 값을 넘기는 자바스크립트와 해당 기능을 어떻게 submit에 넣는지 알아보도록 하겠습니다.

 

[Javascript] 회원가입 시, 패스워드 체크 기능 구현하기

---

Javascript Code

function validatePassword() {
  var passwd = document.getElementById("password").value;
  var repeatPasswd = document.getElementById("repeat-password").value;

  if (password != confirmPassword) {
    alert("패스워드가 일치하지 않습니다.");
    return false;
  }

  return true;
}

 

passwd 변수는 id가 password인 input값을 세팅하고, repeatPasswd 변수는 id가 repeat-password 값을 세팅하게 됩니다. 해당 펑션은 패스워드가 일치하지 않을 경우 false를 리턴하고, 일치할 경우 true를 리턴합니다.

 

Submit Code

<form>
  <button type="submit" onclick="return validatePassword()">회원가입</button>
</form>

 

submit으로 지정된 버튼의 경우, 클릭하게 되면 form의 값들을 전송하는 역할을 하게 됩니다. 하지만, 예제와 같이 return 펑션()과 같이 만들경우 해당 펑션이 false일 경우 폼을 실행하지 않게 됩니다.

 

결국 이와 같이 Submit에 검증을 할 수 있는 펑션을 만들고, 해당 펑션에서 값을 체크한 뒤 true, false를 리턴하게 되어 form 값을 전달할 것인지 말 것인지를 정하는게 펑션의 역할이라 볼 수 있습니다. 이를 토대로 패스워드 뿐만 아니라 이메일에 정규표현식을 넣어서 이메일 여부를 알려주든지 id 값이 문제가 없는지 등을 자바스크립트에서 미리 점검하여 폼을 넘겨주는 방식을 많이 사용하고 있습니다.