[JAVASCRIPT] 유효성 체크 하는 방법

생각보다 개발을 하면서 유효성 체크를 해야하는 경우가 많습니다. 가령 jsp를 사용하는 환경에서 사용자에게 input에 입력을 받은 뒤 전송 버튼을 눌렀을 때 input값이 유효한지 검사하는 것인데요. 이럴 때는 굳이 java코드를 jsp에 넣을 필요 없이 script처리를 하면 좋습니다.

<form action="login.jsp" method="post">
<div>
         <label for="id1">아이디</label>
         <input type="text" name="id1" id="id1"/>
    </div>
      <div>
         <label for="pwd">패스워드</label>
         <input type="password" name="pwd1" id="pwd1"/>
      </div>
          <button id="submit" type="submit">로그인</button>
          <button id="reset" type="reset">취소</button>
</form>

위와같은 소스가 있다고 치겠습니다. 이번에 해보려는 것은 로그인 버튼을 눌렀을 때 pwd1의 값을 확인해서 해당 값이 맞는지 틀린지 확인해서 틀렸다면 alert을 띄우는 소스를 만들려고 합니다. 이 때 스크립트에서 어떻게 처리해주면 될까요?

728x90

<form action="login.jsp" method="post">
<div>
         <label for="id1">아이디</label>
         <input type="text" name="id1" id="id1"/>
    </div>
      <div>
         <label for="pwd">패스워드</label>
         <input type="password" name="pwd1" id="pwd1"/>
      </div>
          <button id="submit" type="button" onclick="sbm();">로그인</button>
          <button id="reset" type="reset">취소</button>
</form>

우선 로그인 버튼 타입을 변경합니다. 일반 버튼으로 만든 뒤 onclick 시 sbm()을 실행하도록 만들어주었습니다. 

var okPwd = "1234";

function sbm(){
  var pwd = document.getElementById("pwd1").value;
  
  if(okPwd != pwd){
      alert("비밀번호가 다릅니다.");
  }
  
}

okPwd와 pwd가 다르다면 alert으로 알려주는 프로그램을 만들어봤습니다. 이와같이 조건을 설정해서 해당 값이 어떻게 들어오냐에 따라 검사를 해주면 됩니다. 예시는 쉽게 비밀번호에 입력한 값이 같은가 다른가에 대해 알아봤지만, 12자리를 넘는다거나 입력하면 안되는 특수문자가 들어있다거나... 아이디가 이메일 형식이 아니라거나 하는 검사를 할 때 주로 이렇게 script를 이용하게 됩니다. 실제로 비밀번호 검사를 script로 진행하면 안되겠죠?