자바스크립트(Javascript) 폼(Form) 에 입력된 값의 유효성 체크

자바스크립트(Javascript) 폼(Form) 에 입력된 값의 유효성 체크

 

개발환경 : window 7 64bit

 

Form 내부에 있는 다양한 입력개체 들에 대한 데이터 검증은 아무 많이 사용하는 부분들입니다. Submit 하기전에 데이터가 제대로 들어가 있는지 체크해서 사용자가 잘못된 데이터라고 판단되면 경고메시지를 띄우고 더 이상 진행을 시키지 않는 것이죠.

 

이런 웹서버로 전송하기 전에 클라이언트에서

검증하는 방법에는 두가지가 있는데 기본 유효성검사,

데이터 형식 유효성 검사 입니다.

 

l  기본유효성검사 : 필드에 데이터가 있는지 없는지 체크합니다.

l  데이터형식 유효성검사 : 데이터의 값이 정확한지 아닌지 체크

하기위해 검증로직으로 체크합니다.

 

1. 기본유효성검사

 

기본검사를 하기 위해 onsubmit 이벤트가 발생할 때

Validate() 함수가 실행되게 합니다. 데이터가 있는지

없는지 체크하기 위해 Value = “” 을 If 문사용해서

없다면 {} 안에 내용을 실행합니다.

이렇게 개체에 데이터가 있는지 없는지 체크하는

것과 길이값등의 기본적인 것만 체크하는 것이

기본유효성검사입니다.

 

<script type="text/javascript"> <!-- // Form validation code will come here. function validate() {     if( document.myForm.Name.value == "" )    {      alert( "Please provide your name!" );      document.myForm.Name.focus() ;      return false;    }    if( document.myForm.EMail.value == "" )    {      alert( "Please provide your Email!" );      document.myForm.EMail.focus() ;      return false;    }    if( document.myForm.Zip.value == "" ||            isNaN( document.myForm.Zip.value ) ||            document.myForm.Zip.value.length != 5 )    {      alert( "Please provide a zip in the format #####." );      document.myForm.Zip.focus() ;      return false;    }    if( document.myForm.Country.value == "-1" )    {      alert( "Please provide your country!" );      return false;    }    return( true ); } //--> </script>

 

2. 데이터유효성검사하기

 

데이터 유효성검사는 조금 복잡한 검사입니다. 이것도 서버에

전송하기전 클라이언트에서 검사하는 과정에 해당되겠죠.

주민번호 체크라던지 이메일 체크가 그에

해당하는 것이겠죠. 아래 샘플도 이메일 체크인데

@ 체크와 dot 등을 체크합니다.

 

<script type="text/javascript"> <!-- function validateEmail() {    var emailID = document.myForm.EMail.value;    atpos = emailID.indexOf("@");    dotpos = emailID.lastIndexOf(".");    if (atpos < 1 || ( dotpos - atpos < 2 ))    {        alert("Please enter correct email ID")        document.myForm.EMail.focus() ;        return false;    }    return( true ); } //--> </script>