Please Enable JavaScript!
Gon[ Enable JavaScript ]

반응형

자바스크립트(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>

 

반응형
Posted by 녹두장군1
,