Lo script che vi presentiamo contiene due funzioni destinate alla validazione del contenuto inserito dall'utente all'interno di campi di testo di form. In particolare, viene effettuata la convalida rispetto all'inserimento di lettere e numeri.
Tutto è basato sull'utilizzo combinato degli eventi e della proprietà charCode. Quest'ultima restituisce i valori ASCII di ciascun carattere: operando con una serie di condizioni, lo script è in grado di catturare il valore inserito e di avvisare l'utente con un alert nel caso in cui il carattere inserito non corrisponda alla regola impostata. Per le lettere è possibile l'inserimento sia di maiuscole che di minuscole.
Lo script si compone di una sezione JavaScript, e di un richiamo all'interno delle pagine Web.
- esempio.htm
Per una più semplice comprensione del presente script fai continuamente riferimento ai file sopracitati, verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.
## 1: LA SEZIONE JAVASCRIPT
All'interno della sezione <head></head> del documento di esempio, trovi la dichiarazione dello script. Esso si compone di due funzioni. Esaminiamo la prima:
<!--
function numeralsOnly(evt) {
evt = (evt) ? evt : event;
var charCode = (evt.charCode) ? evt.charCode : ((evt.keyCode) ? evt.keyCode
:
((evt.which) ? evt.which : 0));
if (charCode> 31 && (charCode < 48 || charCode> 57)) {
alert("Puoi inserire solo numeri!");
return false;
}
return true;
}
-->
La funzione numeralsOnly verifica che nel campo vengano inseriti esclusivamente numeri. È dunque ideale, per esempio, per campi destinati a CAP o numeri di telefono.
Subito dopo l'istruzione che consente di impostare l'evento che inizializzerà la funzione, troviamo la parte centrale e cruciale. Una variabile che tramite un'espressione condizionale contiene il riferimento ai soli valori numerici tra 0 e 9. Nel caso in cui il valore inserito non corrisponda a quanto dichiarato nella variabile, lo script lancia un alert, il cui testo è ovviamente personalizzabile.
La seconda funzione, lettersOnly, è praticamente identica alla prima, con la sola differenza che la variabile charCode conterrà solo valori rappresentati da lettere (maiuscole e minuscole):
<!--
function lettersOnly(evt) {
evt = (evt) ? evt : event;
var charCode = (evt.charCode) ? evt.charCode : ((evt.keyCode) ? evt.keyCode
:
((evt.which) ? evt.which : 0));
if (charCode> 31 && (charCode < 65 || charCode> 90) &&
(charCode < 97 || charCode> 122)) {
alert("Puoi inserire solo lettere!");
return false;
}
return true;
}
-->
## 2: RICHIAMO INTERNO ALLA PAGINA WEB
Nel corpo della pagina web abbiamo predisposto due form per testare le due funzioni. Il primo:
<form>
<input type="text" name="testo" onkeypress="return numeralsOnly(event)">
<input type="submit" value="Invia">
</form>
Di notevole solo la dichiarazione dell'evento che richiamerà la funzione:
onkeypress="return numeralsOnly(event)
La verifica avverrà alla semplice pressione di un tasto (onkeypress).
Analizziamo il secondo form:
<form>
<input type="text" name="testo" onkeypress="return lettersOnly(event)">
<input type="submit" value="Invia">
</form>
Identico al primo, anche nell'evento, ma chiamata alla seconda funzione.
Lo script, dunque può essere utilizzato così com'è, senza modificare la parte Javascript e agendo, dunque, solo sul codice HTML per richiamare la funzione e impostare l'evento sul campo (o sui campi da sottoporre a validazione).
