💻 Programming/Javascript

[Javascript / 자바스크립트] 강좌 #18 - Validation ( 유효성 검사 )

유효성 검사라는 말은 좀 어렵죠? 간단히 말하면 그냥 검사하는겁니다. 보내려는 데이타가 제대로 된 포맷으로 전달이 되는지 아니면 필수 입력값이 빈칸으로 남아있지는 않은지 등등을 말이죠.
자 바스크립트에서 유효성 검사는 크게 두가지로 나눕니다. 기본 검사와 포맷검사. 기본검사에서는 필수입력값이 빈칸으로 남아있지는 않은지에 대한 검사를 합니다. 그리고 포맷검사에서는 입력한 데이타의 포맷이 서버에서 필요로 하는 포맷이 맞는지를 검사를 하게 됩니다.

예제를 한번 볼까요?? 검사를 할때는 아래처럼 코딩을 하게 됩니다. 검사를 할 때 하나의 텍스트필드 단위로 할 수도 있을 것이고 모든 필드를 대상으로 검사를 진행할 수도 있을텐데 이건 개발자의 재량껏 어떤식으로 구현하겠다~라고 정하면 될 것 같네요.

<html>
<head>
<title>Form Validation</title>
<script type="text/javascript">
<!--
// Form validation code will come here.
//-->
</script>
</head>
<body>
 <form action="/cgi-bin/test.cgi" name="myForm"  
          onsubmit="return(validate());">
 <table cellspacing="2" cellpadding="2" border="1">
 <tr>
   <td align="right">Name</td>
   <td><input type="text" name="Name" /></td>
 </tr>
 <tr>
   <td align="right">EMail</td>
   <td><input type="text" name="EMail" /></td>
 </tr>
 <tr>
   <td align="right">Zip Code</td>
   <td><input type="text" name="Zip" /></td>
 </tr>
 <tr>
 <td align="right">Country</td>
 <td>
 <select name="Country">
   <option value="-1" selected>[choose yours]</option>
   <option value="1">USA</option>
   <option value="2">UK</option>
   <option value="3">INDIA</option>
 </select>
 </td>
 </tr>
 <tr>
   <td align="right"></td>
   <td><input type="submit" value="Submit" /></td>
 </tr>
 </table>
 </form>
 </body>
 </html>

기본검사:

위에서 본 기본 틀에서 validation하는 기능을 구현해보았습니다.:

<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>

소스를 실행해보세요 ^__^

포맷검사:

이번에는 포맷검사를 해보도록 할텐데요 이 포맷검사는 어떤 입력창에 들어와야 하는 입력값의 포맷을 정의하는 정책이 있어야 합니다. 예를들어 이메일을 입력해야하는 입력란에는 asdf@bbc.com과 같은 형태의 이메일 포맷을 갖고있는 문자열이 들어가야 한다는 것입니다. 아래 예제는 이메일 필드에 입력된 값이 이메일 형식에 맞는지를 검사해주는 기능이네요.

<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>

직접 테스트 해보실거죠?? ^___^

Reference : http://www.tutorialspoint.com/javascript/javascript_form_validations.htm

저작자표시 비영리 변경금지

'💻 Programming > Javascript' 카테고리의 다른 글

[Javascript / 자바스크립트] 강좌 #20 - Multimedia ( 멀티미디어, 음악, 동영상 ) (0)	2015.08.05
[Javascript / 자바스크립트] 강좌 #19 - Animation ( 애니메이션 ) (0)	2015.08.05
[Javascript / 자바스크립트] 강좌 #17 - Error Handling ( 예외 처리 ) (0)	2015.08.05
[Javascript / 자바스크립트] 강좌 #16 - Object ( 객체 ) (0)	2015.08.05
[Javascript / 자바스크립트] 강좌 #15 - void 키워드 (0)	2015.08.05

💻 Programming/Javascript

[Javascript / 자바스크립트] 강좌 #18 - Validation ( 유효성 검사 )

기본검사:

포맷검사:

'💻 Programming > Javascript' 카테고리의 다른 글

Category

Recent Posts

Recent Comments

티스토리툴바