Loris Badii
a- a+

Controllo completo dei dati

Bene siamo arrivati ad applicare tutto ciò che abbiamo visto riguardo alla validazione lato client, forse non ce ne siamo accorti ma abbiamo tolto un bel po' di lavoro al server e abbiamo dato una maggiore efficienza all'applicazione quintuplicando la velocità di risposta che avremmo avuto se fosse stato il server a fare questo lavoro.

Ora vediamo nel dettaglio cosa si può fare facendo uso delle espressioni regolari, applicheremo la validazione dei campi vista nella seconda lezione e quella di controllo nella terza, per queste ultime useremo uno script esterno.

Ora, spiegare cosa siano e da dove vengano le regExp è cosa abbastanza lunga e complessa ma diciamo che vengono dalle espressioni di ricerca. Le espressioni di ricerca risalgono alle prime ricerche sul funzionamento del sistema nervoso umano. Warren McCulloch e Walter Pitts, due neurofisiologi, svilupparono infatti un metodo matematico per descrivere tale sistema.
Successivamente, il lavoro di Kleene sfociò in alcuni algoritmi di ricerca computazionale ideati da Ken Thompson, il principale inventore di Unix. La prima applicazione pratica delle espressioni di ricerca apparve infatti nell'editor Unix denominato qed.
Da quel momento, le espressioni di ricerca hanno occupato una parte importante negli editor di testo e negli strumenti di ricerca.
Con le espressioni di ricerca è possibile: 

Verificare la corrispondenza di un criterio in una stringa. 
È possibile verificare se un criterio relativo a un numero di telefono o a un numero di carta di credito ricorre in una stringa.
Tale metodo è denominato convalida dei dati. Sostituire del testo. 
È possibile utilizzare un'espressione di ricerca per identificare testo specifico in un 
documento e rimuoverlo o sostituirlo con altro testo. 
Estrarre una sottostringa da una stringa sulla base di una corrispondenza di un criterio. 
È possibile individuare testo specifico in un documento o in un campo di input.

Tutto questo è abbastanza difficile da memorizzare e infatti ricordarsi i set di caratteri e sempre stata una cosa per me non usuale, per fortuna questo discorso e le tabelle dei set di caratteri assieme alla sintassi li trovate in rete all'indirizzo:
http://www.microsoft.com/italy/scripting/default.htm?/
Italy/Scripting/scriptlets/doc/letimplASP.htm
 
solo l'esperienza e l'uso di queste tecniche vi permetterà memorizzarne alcune e se avete buona memoria anche di più.
Comunque potete costruire e confrontare come e da dove vengono quelle utilizzate da questa lezione e anche approfondire l'argomento che per essere trattato meriterebbe molte pagine, comunque da non confondere è l' oggetto Regular Expression globale con l'oggetto globale RegExp. 

Benché possano sembrare simili, sono in realtà due oggetti distinti. 
Le proprietà dell'oggetto Regular Expression contengono solo informazioni su una particolare istanza di Regular Expression, mentre le proprietà dell'oggetto globale RegExp contengono informazioni continuamente aggiornate su ciascuna corrispondenza nel momento in cui si verifica.

Inoltre vi invito a documentarvi su flag e metodo test usati qui. 

Tutte queste info e il testo completo dal quale ho estrapolato alcuni brani per cercare di spiegare le espressioni regolari e di ricerca nonchè l'oggetto regExp che come detto no è la stessa cosa le trovate qui.

<form method="post" onsubmit="return validateForm(this)"> &nbsp;</form><table width="349"> <tbody>  <tr>   <td width="454">    <table align="left" bgcolor="#ffff99" border="0" cellpadding="0" cellspacing="0" width="380">     <tbody>      <tr>       <td width="184">        <p align="left">         Nome</p>       </td>       <td width="196">        <p align="left">         <input name="nome" /></p>       </td>      </tr>      <tr>       <td width="184">        <p align="left">         Cognome</p>       </td>       <td width="196">        <p align="left">         <input name="cognome" /></p>       </td>      </tr>      <tr>       <td width="184">        <p align="left">         Username</p>       </td>       <td width="196">        <p align="left">         <input name="uid" /></p>       </td>      </tr>      <tr>       <td width="184">        <p align="left">         Password</p>       </td>       <td width="196">        <p align="left">         <input name="pwd" /></p>       </td>      </tr>      <tr>       <td width="184">        <p align="left">         Data di nasita</p>       </td>       <td width="196">        <p align="left">         <input name="data_nascita" /></p>       </td>      </tr>      <tr>       <td width="184">        <p align="left">         Citt&agrave; di nascita</p>       </td>       <td width="196">        <p align="left">         <input name="citta_nascita" /></p>       </td>      </tr>      <tr>       <td width="184">        <p align="left">         CAP di nascita</p>       </td>       <td width="196">        <p align="left">         <input name="cap_nascita" /></p>       </td>      </tr>      <tr>       <td width="184">        <p align="left">         Indirizzo di residenza</p>       </td>       <td width="196">        <p align="left">         <input name="indirizzo" /></p>       </td>      </tr>      <tr>       <td width="184">        <p align="left">         Citt&agrave; di residenza</p>       </td>       <td width="196">        <p align="left">         <input name="citta" /></p>       </td>      </tr>      <tr>       <td width="184">        <p align="left">         CAP di residenza</p>       </td>       <td width="196">        <p align="left">         <input name="cap" /></p>       </td>      </tr>      <tr>       <td width="184">        <p align="left">         Codice Fiscale</p>       </td>       <td width="196">        <p align="left">         <input name="cf" /></p>       </td>      </tr>      <tr>       <td width="184">        <p align="left">         Sesso</p>       </td>       <td width="196">        <p align="left">         <select name="sesso"><option value="M">Maschio</option><option selected="selected" value="F">Femmina</option></select></p>       </td>      </tr>      <tr>       <td width="184">        <p align="left">         Partita IVA</p>       </td>       <td width="196">        <p align="left">         <input name="piva" /></p>       </td>      </tr>      <tr>       <td width="184">        <p align="left">         Telefono</p>       </td>       <td width="196">        <p align="left">         <input name="telefono" /></p>       </td>      </tr>      <tr>       <td width="184">        <p align="left">         Fax</p>       </td>       <td width="196">        <p align="left">         <input name="fax" /></p>       </td>      </tr>      <tr>       <td width="184">        <p align="left">         Email</p>       </td>       <td width="196">        <p align="left">         <input name="email" /></p>       </td>      </tr>      <tr>       <td width="184">        <p align="left">         Sito Web</p>       </td>       <td width="196">        <p align="left">         <input name="url" /></p>       </td>      </tr>      <tr>       <td width="184">        <p align="left">         Carta di credito</p>       </td>       <td width="196">        <p align="left">         <select name="nome_cc"><option selected="selected">Visa</option><option>MasterCard</option><option>American Express</option></select></p>       </td>      </tr>      <tr>       <td width="184">        <p align="left">         Titolare</p>       </td>       <td width="196">        <p align="left">         <input name="titolare_cc" /></p>       </td>      </tr>      <tr>       <td width="184">        <p align="left">         Numero</p>       </td>       <td width="196">        <p align="left">         <input name="numero_cc" value="mese/anno" /></p>       </td>      </tr>      <tr>       <td width="184">        <p align="left">         Scadenza</p>       </td>       <td width="196">        <p align="left">         <input name="scadenza_cc" /></p>       </td>      </tr>      <tr>       <td width="184">        <p align="left">         <font size="2">&nbsp;</font></p>       </td>       <td width="196">        <p align="left">         <font size="2">&nbsp;</font></p>       </td>      </tr>      <tr>       <td width="184">        <p align="left">         <input name="registra" type="submit" value="Registra >>" /></p>       </td>       <td width="196">        <p align="left">         <input name="reset" type="reset" value="Svuota campi" /></p>       </td>      </tr>     </tbody>    </table>   </td>  </tr> </tbody></table>

Per comodità (per es. per utilizzare lo stesso codice in altre pagine...) abbiamo inserito gran parte del codice javascript in un file esterno .js Questo è possibile inserendo il codice sul blocco note e salvarlo con estensione .js. Sarà editabile sempre con il blocco note. Per richiamare tale file utilizzeremo la seguente stringa:

<script language="javascript" src="validazione.js"></script>

Il codice contenuto nel file  è:

 

// VERIFICA NOME,COGNOME,CITTA function isName(what,fname) { var i=new RegExp("([a-zA-Z ]{3,})"); if(!i.test(what)) { alert("Il campo "+fname+" non è valido."); return false} return true; } // VERIFICA EMAIL function isEmail(what) { var i=new RegExp("^.+\@(\[?)[a-zA-Z0-9\-\.]+\.([a-zA-Z]{2,3}|[0-9]{1,3})(\]?)$"); if(!i.test(what)) { alert("Il campo EMAIL non è valido."); return false} return true; } // VERIFICA PASSWORD function isPassword(what,fname) { var i=new RegExp("([a-zA-Z0-9]{7,20})"); if(!i.test(what)) { alert("Il campo "+fname+" non è valido."); return false} return true; } // VERIFICA URL function isURL(what) { var i=new RegExp("HTTP://([a-zA-Z.0-9]{2,}).([a-zA-Z.0-9]{2,})"); if(!i.test(what)) { alert("Il campo SITO WEB non è valido."); return false} return true; } // VERIFICA TEL/FAX function isTelFax(what,fname) { var i=new RegExp("([0-9]{2,})/([0-9]{5,})"); if(!i.test(what)) { alert("Il campo "+fname+" non è valido."); return false} return true; } // VERIFICA Partita IVA function isPIVA(what) { if(what.length>0) { var i=new RegExp("[0-9]{11}"); if(!i.test(what)) { alert("Il campo PARTITA IVA non è valido."); } } return true; } // VERIFICA CAP function isCAP(what) { var i=new RegExp("^[0-9]{5}$"); if(!i.test(what)) { alert("Il campo CAP non è corretto."); return false } return true; } // VERIFICA CF function isCF(what) { var i=new RegExp("([a-zA-Z0-9]{16})"); if(!i.test(what)) { alert("Il campo CODICE FISCALE non è valido."); return false } return true; } // VERIFICA Indirizzo function isAddress(what) { var i=new RegExp("([a-zA-Z0-9 ]{3,})"); if(!i.test(what)) { alert("Il campo INDIRIZZO non è valido."); return false } return true; } // VERIFICA Data di nascita function isDate(what,fname) { var i=new RegExp("^([0-9]{1,2})/([0-9]{1,2})/([0-9]{4})$"); if(i.test(what)) { datePart=what.split("/"); giorno=(datePart[0]>=1) && (datePart[0]<=31); mese=(datePart[1]>=1) && (datePart[1]<=12); anno=(datePart[2]>=1900) && (datePart[2]<=9999); if(!giorno || !mese || !anno) { alert("Il campo "+fname+" non è valido."); return false } } else { alert("Il campo "+fname+" non è valido"); return false } return true; } // VERIFICA Titolare carta di credito function isCCOwner(what) { var i=new RegExp("([a-zA-Z. ])"); if(!i.test(what)) { alert("Il campo TITOLARE non è valido."); return false } return true; } // VERIFICA Numero carta di credito function isCCNumber(what) { var i=new RegExp("([0-9]{16,20})"); if(!i.test(what)) { alert("Il campo NUMERO CARTA non è valido."); return false } return true; } // VERIFICA Scadenza carta di credito function isCCExpiration(what) { var i=new RegExp("([0-9]{1,2})/([0-9]{4})$"); if(i.test(what)) { datePart=what.split("/"); mese=(datePart[0]>=1) && (datePart[0]<=12); anno=(datePart[1]>=1900) && (datePart[1]<=9999); if(!mese || !anno) { alert("Il campo SCADENZA CARTA non è valido."); return false } } else { alert("Il campo SCADENZA CARTA non è valido"); return false } return true; }

 

mentre all'interno della pagina web, tra i tag HEAD inseriamo il seguente codice:

 

<script language="javascript"> function validateForm(frm) { if(!isName(frm.nome.value,'NOME')) return false; if(!isName(frm.cognome.value,'COGNOME')) return false; if(!isPassword(frm.uid.value,'USERNAME')) return false; if(!isPassword(frm.pwd.value,'PASSWORD')) return false; if(!isDate(frm.data_nascita.value,'DATA DI NASCITA')) return false; if(!isName(frm.citta_nascita.value,'CITTA DI NASCITA')) return false; if(!isCAP(frm.cap_nascita.value,'CAP DI NASCITA')) return false; if(!isAddress(frm.indirizzo.value)) return false; if(!isName(frm.citta.value,'CITTA DI RESIDENZA')) return false; if(!isCF(frm.cf.value)) return false; if(frm.piva.value.length>0) {if(!isPIVA(frm.piva.value)) return false } if(!isTelFax(frm.telefono.value,'TELEFONO')) return false; if(frm.fax.value.length>0) {if(!isTelFax(frm.fax.value,'FAX')) return false } if(!isEmail(frm.email.value)) return false; if(frm.url.value.length>0) {if(!isURL(frm.url.value)) return false } if(!isCCOwner(frm.titolare_cc.value)) return false; if(!isCCNumber(frm.numero_cc.value)) return false; if(!isCCExpiration(frm.scadenza_cc.value)) return false; return confirm("Confermi la registrazione dei dati?"); } </script>

 

Infine il codice del modulo è il seguente (da inserire tra i tag Body)

 

<form action="tuaregistra.asp" method="post" onsubmit="return validateForm(this)"> <table width="500" border="0" align="left" cellspacing="0" cellpadding="0" bgcolor="#FFFF99"> <tr> <td width="244"><font face="Arial, Helvetica, sans-serif" size="2">Nome</font></td> <td width="256"> <font size="2"> <input type="text" name="nome"> </font></td> </tr> <tr> <td width="244"><font face="Arial, Helvetica, sans-serif" size="2">Cognome</font></td> <td width="256"> <font size="2"> <input type="text" name="cognome"> </font></td> </tr> <tr> <td width="244"><font face="Arial, Helvetica, sans-serif" size="2">Username</font></td> <td width="256"> <font size="2"> <input type="text" name="uid"> </font></td> </tr> <tr> <td width="244"><font face="Arial, Helvetica, sans-serif" size="2">Password</font></td> <td width="256"> <font size="2"> <input type="text" name="pwd"> </font></td> </tr> <tr> <td width="244"><font face="Arial, Helvetica, sans-serif" size="2">Data di nasita</font></td> <td width="256"> <font size="2"> <input type="text" name="data_nascita"> </font></td> </tr> <tr> <td width="244"><font face="Arial, Helvetica, sans-serif" size="2">Città di nascita</font></td> <td width="256"> <font size="2"> <input type="text" name="citta_nascita"> </font></td> </tr> <tr> <td width="244"><font face="Arial, Helvetica, sans-serif" size="2">CAP di nascita</font></td> <td width="256"> <font size="2"> <input type="text" name="cap_nascita"> </font></td> </tr> <tr> <td width="244"><font face="Arial, Helvetica, sans-serif" size="2">Indirizzo di residenza</font></td> <td width="256"> <font size="2"> <input type="text" name="indirizzo"> </font></td> </tr> <tr> <td width="244"><font face="Arial, Helvetica, sans-serif" size="2">Città di residenza</font></td> <td width="256"> <font size="2"> <input type="text" name="citta"> </font></td> </tr> <tr> <td width="244"><font face="Arial, Helvetica, sans-serif" size="2">CAP di residenza</font></td> <td width="256"> <font size="2"> <input type="text" name="cap"> </font></td> </tr> <tr> <td width="244"><font face="Arial, Helvetica, sans-serif" size="2">Codice Fiscale</font></td> <td width="256"> <font size="2"> <input type="text" name="cf"> </font></td> </tr> <tr> <td width="244"><font face="Arial, Helvetica, sans-serif" size="2">Sesso</font></td> <td width="256"> <font size="2"> <select name="sesso"> <option value="M">Maschio</option> <option value="F" selected>Femmina</option> </select> </font></td> </tr> <tr> <td width="244"><font face="Arial, Helvetica, sans-serif" size="2">Partita IVA</font></td> <td width="256"> <font size="2"> <input type="text" name="piva"> </font></td> </tr> <tr> <td width="244"><font face="Arial, Helvetica, sans-serif" size="2">Telefono</font></td> <td width="256"> <font size="2"> <input type="text" name="telefono"> </font></td> </tr> <tr> <td width="244"><font face="Arial, Helvetica, sans-serif" size="2">Fax</font></td> <td width="256"> <font size="2"> <input type="text" name="fax"> </font></td> </tr> <tr> <td width="244"><font face="Arial, Helvetica, sans-serif" size="2">Email</font></td> <td width="256"> <font size="2"> <input type="text" name="email"> </font></td> </tr> <tr> <td width="244"><font face="Arial, Helvetica, sans-serif" size="2">Sito Web</font></td> <td width="256"> <font size="2"> <input type="text" name="url"> </font></td> </tr> <tr> <td width="244"><font face="Arial, Helvetica, sans-serif" size="2">Carta di credito</font></td> <td width="256"> <font size="2"> <select name="nome_cc"> <option>Visa</option> <option>MasterCard</option> <option>American Express</option> </select> </font></td> </tr> <tr> <td width="244"><font face="Arial, Helvetica, sans-serif" size="2">Titolare </font></td> <td width="256"><font size="2"> <input type="text" name="titolare_cc"> </font></td> </tr> <tr> <td width="244"><font face="Arial, Helvetica, sans-serif" size="2">Numero </font></td> <td width="256"><font size="2"> <input type="text" name="numero_cc" value="mese/anno" size="20"> </font></td> </tr> <tr> <td width="244"><font face="Arial, Helvetica, sans-serif" size="2">Scadenza </font></td> <td width="256"><font size="2"> <input type="text" name="scadenza_cc"> </font></td> </tr> <tr> <td width="244"> </td> <td width="256"> <font size="2"> </font></td> </tr> <tr> <td width="244"> <input type="submit" name="registra" value="Registra >>"> </td> <td width="256"> <input type="reset" name="reset" value="Svuota campi"> </td> </tr> </table> </form>



Ti potrebbe interessare anche

commenta la notizia