Quanto segue e' tratto da "Introduzione a Javascript"
© 1996 by Stefan Koch - Traduzione di Andrea Chiarelli


"Prima di tutto creeremo una piccola form. La pagina HTML conterrà due caselle di testo. L'utente dovrà scrivere il suo nome nella prima casella e l'indirizzo di e-mail nella seconda. Potete inserire qualsiasi cosa negli elementi della form, poi cliccate sul relativo pulsante. Provate anche a non inserire nulla e cliccate sul pulsante.
Inserisci il tuo nome:

Inserisci il tuo indirizzo di e-mail:

Per quanto riguarda la prima casella di testo, vedrete un messaggio di errore quando viene lasciata in bianco, mentre un qualsiasi input viene considerato valido. Naturalmente ciò non previene l'inserimento di un nome sbagliato. Il browser accetta anche numeri, quindi se inserite '17' otterrete un 'Ciao 17!'.
Il controllo della seconda casella è leggermente più sofisticato. Provate ad inserire una semplice stringa, il vostro nome per esempio. Non verrà accettato (a meno che non abbiate un @ nel vostro nome...). Il criterio di accettazione dell'input come un indirizzo di e-mail valido consiste nel verificare la presenza del simbolo @. Viene accettato anche il solo simbolo @, che non è certamente significativo. Per semplicità abbiamo deciso di controllare soltanto la presenza di @, dal momento che ogni indirizzo di e-mail in Internet contiene questo simbolo.

Come è fatto lo script che crea questa form e ne controlla l'input? Eccolo:

<html>
<head>
<script language="JavaScript">
<!--

function test1(form) {
if (form.text1.value == "")
alert("Inserisci una stringa, per favore!")
else {
alert("Ciao "+form.text1.value+"! Inserimento dati ok!");
}
}

function test2(form) {
if (form.text2.value == "" ||
form.text2.value.indexOf('@', 0) == -1)
alert("Indirizzo di e-mail non valido!");
else alert("OK!");
}
// -->
</script>
</head>

<body>
<form name="first">
Inserisci il tuo nome:<br>
<input type="text" name="text1">
<input type="button" name="button1" value="Controlla" onClick="test1(this.form)">
<P>
Inserisci il tuo indirizzo di e-mail:<br>
<input type="text" name="text2">
<input type="button" name="button2" value="Controlla" onClick="test2(this.form)">
</body>

Diamo prima uno sguardo al codice HTML nel corpo del documento. Abbiamo creato due caselle di testo e due pulsanti. I pulsanti invocano le funzioni test1(...) o test2(...) in base a quale di loro viene selezionato e viene passato come argomento this.form per permetterne l'accesso ai suoi elementi.
La funzione test1(form) controlla se la stringa è vuota; questo è fatto con if (form.text1.value == "").... 'form' è la variabile a cui viene assegnato il valore 'this.form' nella chiamata di funzione. Possiamo ottenere il valore del dato inserito nella casella di testo usando 'value' in combinazione con form.text1. Per controllare se la stringa è vuota la confrontiamo con "". Se la stringa inserita è uguale a "", verrà segnalato all'utente un messaggio di errore, altrimenti verrà segnalato un messaggio di ok.
Notate che se l'utente inserisce solo spazi, verrà considerato come input valido! Potete naturalmente controllare anche questa possibilità ed escluderla. Penso che non dovrebbe essere troppo difficile con le informazioni che avete fin qui acquisito.
Vediamo ora la funzione test2(form). Anche questa funzione controlla che sia stato inserito qualcosa nella relativa casella facendo un confronto con la stringa vuota, ma ho aggiunto qualcosa all'if. Il simbolo || indica l'operatore OR, di cui abbiamo parlato nella parte 6 di questo tutorial.
L'istruzione if controlla se il primo o il secondo confronto sono veri; se almeno uno lo è viene eseguito il comando successivo. Ciò vuol dire che otterrete un messaggio di errore se la vostra stringa è vuota o non contiene un @. La seconda operazione dell'istruzione if controlla se la stringa inserita contiene un @."


Torna indietro