ES6-검증

Form validation일반적으로 클라이언트가 필요한 모든 데이터를 입력하고 제출 버튼을 누른 후 서버에서 발생하는 데 사용됩니다. 클라이언트가 입력 한 데이터가 올바르지 않거나 단순히 누락 된 경우 서버는 모든 데이터를 클라이언트에 다시 보내고 올바른 정보와 함께 양식을 다시 제출하도록 요청해야합니다. 이것은 서버에 많은 부담을 주던 정말 긴 프로세스였습니다.

JavaScript는 웹 서버로 보내기 전에 클라이언트 컴퓨터에서 양식의 데이터를 확인하는 방법을 제공합니다. 양식 유효성 검사는 일반적으로 두 가지 기능을 수행합니다.

Basic Validation − 우선, 모든 필수 필드가 채워 졌는지 확인하기 위해 양식을 확인해야합니다. 양식의 각 필드를 반복하고 데이터를 확인하기 만하면됩니다.
Data Format Validation− 둘째, 입력 된 데이터가 올바른 형식과 값인지 확인해야합니다. 코드에는 데이터의 정확성을 테스트하기위한 적절한 논리가 포함되어야합니다.

예

유효성 검사 프로세스를 이해하기 위해 예를 들어 보겠습니다. 다음은 html 형식의 간단한 양식입니다.

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

산출

위 코드가 성공적으로 실행되면 다음 출력이 표시됩니다.

기본 양식 유효성 검사

먼저 기본 양식 유효성 검사를 수행하는 방법을 살펴 보겠습니다. 위의 양식에서 우리는validate() 데이터 유효성 검사 onsubmit이벤트가 발생하고 있습니다. 다음 코드는이 validate () 함수의 구현을 보여줍니다.

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

데이터 형식 유효성 검사

이제 입력 한 양식 데이터를 웹 서버에 제출하기 전에 유효성을 검사하는 방법을 살펴 보겠습니다.

다음 예는 입력 한 이메일 주소의 유효성을 검사하는 방법을 보여줍니다. 이메일 주소는 최소한 '@'기호와 점 (.)을 포함해야합니다. 또한 '@'는 이메일 주소의 첫 번째 문자가 아니어야하며 마지막 점은 '@'기호 뒤의 한 문자 이상이어야합니다.

예

이메일 확인을 위해 다음 코드를 시도하십시오.

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