ES6 - Validazioni

Form validationnormalmente accadeva sul server, dopo che il client aveva inserito tutti i dati necessari e quindi premuto il pulsante Invia. Se i dati inseriti dal client erano errati o semplicemente mancanti, il server dovrebbe inviare tutti i dati al client e richiedere che il modulo venga reinviato con le informazioni corrette. Questo è stato davvero un processo lungo che gravava molto sul server.

JavaScript fornisce un modo per convalidare i dati del modulo sul computer del client prima di inviarlo al server web. La convalida del modulo svolge generalmente due funzioni.

  • Basic Validation - Prima di tutto, il modulo deve essere controllato per assicurarsi che tutti i campi obbligatori siano compilati. Richiederebbe solo un ciclo attraverso ogni campo del modulo e controllare i dati.

  • Data Format Validation- In secondo luogo, i dati inseriti devono essere controllati per forma e valore corretti. Il codice deve includere la logica appropriata per verificare la correttezza dei dati.

Esempio

Faremo un esempio per comprendere il processo di convalida. Ecco un semplice modulo in formato 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>

Produzione

Il seguente output viene visualizzato in caso di corretta esecuzione del codice precedente.

Convalida di moduli di base

Per prima cosa vediamo come eseguire una convalida di base del modulo. Nella forma sopra, stiamo chiamandovalidate() per convalidare i dati quando onsubmitevento si sta verificando. Il codice seguente mostra l'implementazione di questa funzione 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>

Convalida del formato dati

Ora vedremo come convalidare i dati del modulo inserito prima di inviarlo al server web.

L'esempio seguente mostra come convalidare un indirizzo e-mail inserito. Un indirizzo email deve contenere almeno un segno "@" e un punto (.). Inoltre, il "@" non deve essere il primo carattere dell'indirizzo e-mail e l'ultimo punto deve essere almeno un carattere dopo il segno "@"

Esempio

Prova il seguente codice per la convalida dell'email.

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