웹페이지 가입시 여러가지 데이터 입력란이 존재하는데요. 필수항목으로 표시된 텍스트 박스는 반드시 입력해야 하는데 입력하지 않을 경우 경고창을 띄우는 것을 바로 자바스크립트 유효성검사 라고 하는데요.
자바스크립트를 이용하여 회원가입시에 이름, 주소, 이메일 등이 입력되지 않았을 때 경고창을 띄우는 형식의 유효성 체크 예제를 보여드리도록 하겠습니다.
1. 유효성 검사
1) jsp에서 입력한 값이 올바른지 또는 양식에 맞게 입력하는지 검사하는 것
2) DB에 올바른 값이 들어가기 위해 하는 사전 작업
3) 종류
– 텍스트 박스안의 값이 미입력된 경우
– 2개의 패스워드의 값이 다른 경우
– 이메일이 형식이 올바르지 않은 경우
2. 예제소스
기본적인 html코드는 다음과 같습니다.
그리고 회원가입 버튼을 누르게 되면 onclick 이벤트를 통해서 각각의 입력필드를 체크하게 됩니다.
3. 자바스크립트 onclick 이벤트
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript"> function checkfield(){ if(document.addjoin.id.value==""){ //id값이 없을 경우 alert("아이디를 입력하세요"); //메세지 경고창을 띄운 후 document.addjoin.id.focus(); // id 텍스트박스에 커서를 위치 exit; }else if(document.addjoin.pw.value==""){ alert("비밀번호를 입력하세요"); document.addjoin.pw.focus(); exit; }else if(document.addjoin.pw2.value==""){ alert("비밀번호확인을 입력하세요"); document.addjoin.pw2.focus(); exit; }else if(document.addjoin.name.value==""){ alert("이름을 입력하세요"); document.addjoin.name.focus(); exit; }else if(document.addjoin.nick.value==""){ alert("닉네임을 입력하세요"); document.addjoin.nick.focus(); exit; }else if(document.addjoin.addr.value==""){ alert("주소를 입력하세요"); document.addjoin.addr.focus(); exit; }else if(document.addjoin.email.value==""){ alert("이메일을 입력하세요"); document.addjoin.email.focus(); exit; } if(document.addjoin.pw.value!=document.addjoin.pw2.value){ //비밀번호와 비밀번호확인의 값이 다를 경우 alert("입력한 2개의 비밀번호가 일치하지 않습니다."); document.addjoin.pw.focus(); exit; } var exptext = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+/; if(exptext.test(document.addjoin.email.value)==false){ //이메일 형식이 알파벳+숫자@알파벳+숫자.알파벳+숫자 형식이 아닐경우 alert("이 메일형식이 올바르지 않습니다."); document.addjoin.email.focus(); exit; } document.addjoin.submit(); } </script> </head>
html이나 jsp 로 구성된 폼의 head에 javascript function을 선언해 주시고 위의 구문을 넣어주시면 됩니다.
if절에 쓰여진 텍스트박스의 값을 가져오는 부분은 크로스 브라우징을 위해 jquery로 구성하는 것이 좋습니다.
4. 구동시 화면
구동시 화면은 위와 같은데요.
가입 버튼을 클릭하게 되면 각각의 필드를 검사하게 됩니다.
첫번째 필드부터 값이 없기 때문에 alert 창이 뜬 모습입니다.
2번째 요소로 비밀번호가 같지 않을 경우인데요.
이 경우에도 두개의 필드를 비교하셔 값이 다르면 띄우는 경고창입니다.
마지막으로 이메일 형식에 대한 경고창인데요.
잘못된 이메일 형식을 입력할 경우 위와 같이 경고창이 뜨게 됩니다.
사실 자바스크립트나 jquery를 이용한 유효성검사는 굉장히 중요한 요소중에 하나인데요.
5. 유효성 검사를 하는 이유
사용자가 가입 버튼을 누르게 되면 form action을 통해 컨트롤러 까지 값이 넘어가게 되는데 이때 사용자가 입력할 필드가 빈값이면 DB에는 null값이 저장되게 됩니다.
하지만 DB의 필드가 null 허용이 안되있다면 에러를 발생하게 되는데요.
이런 경우에 사용자가 불편을 느낄 수 있으며, 이를 악이용한 보한 문제가 발생할 수도 있습니다. 그렇기에 자바스크립트를 이용한 이메일이나 빈값 유효성 검사는 잊지 말고 해야 합니다.
짱짱
헐 딱 이걸 원했어요. 알려주셔서 너무 감사합니다!!
관리자
저도 감사합니다!!^^