L’uso principale di JavaScript nella gestione dei moduli è la convalida dei dati inseriti dagli utenti. Prima di inviare un modulo al server, si consiglia di convalidare i dati inseriti dall’utente tramite JavaScript. In questo modo, se l’utente ha effettuato un errore durante il riempimento del modulo, può essere notificato istantaneamente, senza la necessità di attendere la risposta del server.
Notificare gli errori immediatamente utilizzando JavaScript migliora l’utente Soddisfazione con l’applicazione (che è tecnicamente nota come “Miglioramento dell’esperienza utente”) e aiuta a ridurre il carico di elaborazione sul server.
Normalmente, la convalida di un modulo consiste nella chiamata a una funzione di convalida quando il L’utente fa clic sul pulsante Form Invia. In questa funzione, vengono controllati se i valori che l’utente hanno inserito sono conformi alle restrizioni imposte dall’applicazione.
Sebbene ci siano tanti possibili controlli come elementi di forma diversi, alcuni controlli sono molto comuni : che un campo obbligatorio, che è selezionato il valore di un elenco a discesa, che l’indirizzo e-mail indicato è corretto, che la data introdotta è logica, che un numero viene immesso come richiesto, ecc.
A Di seguito è riportato il codice JavaScript di base necessario per incorporare la convalida a un modulo:
<form action="" method="" name="" onsubmit="return validacion()"> ...</form>
e lo schema funzione validacion() è il seguente:
function validacion() { if (condicion que debe cumplir el primer campo del formulario) { // Si no se cumple la condicion... alert(' El campo debe tener un valor de...'); return false; } else if (condicion que debe cumplir el segundo campo del formulario) { // Si no se cumple la condicion... alert(' El campo debe tener un valor de...'); return false; } ... else if (condicion que debe cumplir el último campo del formulario) { // Si no se cumple la condicion... alert(' El campo debe tener un valor de...'); return false; } // Si el script ha llegado a este punto, todas las condiciones // se han cumplido, por lo que se devuelve el valor true return true;}
Il funzionamento di questa tecnica di convalida è basato sul comportamento di L’evento onsubmit da JavaScript. Come altri eventi come onclick e onkeypress, Varia il tuo comportamento in funzione del valore che viene restituito.
quindi, se l’evento onsubmit restituisce il valore true, il modulo Invia Come vorrei normalmente. Tuttavia, se l’evento onsubmit restituisce il valore , il modulo non viene inviato. La chiave di questa tecnica è controllare ciascuno degli elementi del modulo. In Quando esiste un elemento errato, il valore viene restituito. Se non vengono trovati errori, il valore true viene restituito.
Pertanto, l’evento IV ID = “19026AD6C7” è definito in primo luogo. del modulo come:
onsubmit="return validacion()"
Come il codice JavaScript restituisce il valore risultante della funzione validacion(), il modulo verrà inviato solo al server se tale funzione restituisce true. Nel caso in cui la funzione validacion() ritorna , il modulo rimarrà invisibile.
all’interno della funzione validacion() Tutte le condizioni imposte dall’applicazione sono controllate. Quando una condizione non è soddisfatta, viene restituito e quindi il modulo non viene inviato. Se viene raggiunto alla fine della funzione, tutte le condizioni sono state soddisfatte correttamente, quindi è restituito true e il modulo viene inviato.
La notifica di Gli errori commessi dipendono dalla progettazione di ciascuna applicazione. Nel codice dell’esempio precedente, i messaggi vengono semplicemente visualizzati utilizzando la funzione alert() indicando l’errore prodotto. Le migliori applicazioni Web progettate mostrano ciascun messaggio di errore accanto all’elemento del modulo corrispondente e di solito mostrano di solito un messaggio principale che indica che il modulo contiene errori.
Una volta definito lo schema funzione validacion(), il codice corrispondente a tutti i controlli effettuati sugli elementi del modulo devono essere aggiunti a questa funzione. Successivamente, alcune delle convalide più comuni dei campi modulo sono mostrate.
7.3.1. Convalidare un campo di testo obbligatorio
Sta per forzare l’utente a inserire un valore in un testo o una scheda di testo in cui è obbligatorio. La condizione in JavaScript può essere indicata come:
In modo che un campo di testo obbligatorio venga completato, è controllato che il Il valore inserito è valido, che il numero di caratteri immesso è maggiore di zero e che sono stati inseriti solo spazi vuoti.
La parola riservata null è un valore speciale Questo è usato per indicare “Nessun valore”. Se il valore di una variabile è null, la variabile non contiene alcun valore oggetto, array, numerico, stringa di testo o booleano.
La seconda parte della condizione richiede che il testo introdotto abbia una lunghezza superiore a zero caratteri, cioè che non è un testo vuoto.
Infine, la terza parte dal Condizione (/^\s+$/.test(valor)) Forze Il valore inserito dall’utente non solo formato da spazi vuoti. Questo controllo si basa sull’utilizzo di “espressioni regolari”, una solita risorsa in qualsiasi linguaggio di programmazione, ma a causa della sua grande complessità non saranno studiati. Pertanto, è solo necessario copiare letteralmente questa condizione, prendendo cura speciale per non modificare alcun carattere dell’espressione.
7.3.2. Convalida di un campo di testo con valori numerici
Si tratta di vincolare l’utente per inserire un valore numerico in una casella di testo. La condizione JavaScript è composta da:
valor = document.getElementById("campo").value;if( isNaN(valor) ) { return false;}
Se il contenuto della variabile Non è un numero valido, la condizione non è soddisfatta. Il vantaggio di utilizzare la funzione interna isNaN() è che semplifica i controlli, poiché JavaScript è responsabile per tenere conto dei decimali, dei segni, ecc.
Sotto alcuni Risultati della funzione :
isNaN(3); // falseisNaN("3"); // falseisNaN(3.3545); // falseisNaN(32323.345); // falseisNaN(+23.2); // falseisNaN("-23.2"); // falseisNaN("23a"); // trueisNaN("23.43.54"); // true
7.3.3 Vengono visualizzati. Convalidare che un’opzione da un elenco
è selezionato, si tratta di rilegatura dell’utente per selezionare una voce da un elenco a discesa. Il seguente codice JavaScript consente di raggiungerlo:
indice = document.getElementById("opciones").selectedIndex;if( indice == null || indice == 0 ) { return false;}<select name="opciones"> <option value="">- Selecciona un valor -</option> <option value="1">Primer valor</option> <option value="2">Segundo valor</option> <option value="3">Tercer valor</option></select>
dalla proprietà selectedIndex, Viene controllato se l’indice dell’opzione selezionata è valida ed è anche diverso da zero. La prima opzione nell’elenco (- Selecciona un valor –) non è valido, quindi il valore è consentito per questa proprietà selectedIndex.
7.3.4. Convalidare un indirizzo email
Si tratta di vincolare l’utente per immettere un indirizzo email con un formato valido. Pertanto, ciò che viene controllato è che l’indirizzo sembra valido, poiché non è controllato se è un account e-mail reale e operativo. La condizione JavaScript è composta da:
valor = document.getElementById("campo").value;if( !(/\w+(\w+)*@\w+(\w+)*\.\w+(\w+)/.test(valor)) ) { return false;}
check viene eseguito di nuovo da espressioni regolari, poiché gli indirizzi e-mail validi possono essere molto diversi. D’altra parte, poiché lo standard che definisce il formato degli indirizzi e-mail è molto complesso, la precedente espressione regolare è una semplificazione. Sebbene questa regola convalida la maggior parte degli indirizzi e-mail utilizzati dagli utenti, non supporta tutti i diversi formati di posta elettronica validi.
7.3.5. Convalida una data
Le date sono solitamente i campi del modulo più complicati da convalidare dalla moltitudine di diversi modi in cui possono essere introdotti. Il seguente codice presuppone che l’anno sia stato ottenuto in qualche modo, il mese e il giorno introdotto dall’utente:
var ano = document.getElementById("ano").value;var mes = document.getElementById("mes").value;var dia = document.getElementById("dia").value;valor = new Date(ano, mes, dia);if( !isNaN(valor) ) { return false;}
La funzione Date(ano, mes, dia) è una funzione JavaScript interna che consente di costruire date dall’anno, il mese e la data della data. È molto importante tenere presente che il numero del mese è indicato da a , essere il mese di gennaio e il mese di dicembre. I giorni del mese Seguire una numerazione diversa, dal momento che il minimo consentito è 1 e il massimo 31.
La convalida è cercare di creare una data con i dati forniti dall’utente. Se i dati dell’utente non sono corretti, la data non può essere costruita correttamente e quindi la convalida del modulo non sarà corretta.
7.3.6. Convalida di un numero di DNI
Si tratta di verificare che il numero fornito dall’utente corrisponda a un numero valido di documenti di identità nazionale o DNI. Sebbene per ciascun paese o regione i requisiti del documento di identità delle persone possano variare, un esempio generico facilmente adattabile è mostrato di seguito. La convalida non dovrebbe solo verificare che il numero sia formato da otto figure e una lettera, ma è anche necessario verificare che la lettera indicata sia corretta per il numero introdotto:
valor = document.getElementById("campo").value;var letras = ;if( !(/^\d{8}$/.test(valor)) ) { return false;}if(valor.charAt(8) != letras) { return false;}
Il primo controllo garantisce che il formato del numero introdotto sia corretto, cioè, è formato da 8 numeri seguiti e una lettera. Se la lettera è all’inizio dei numeri, il controllo sarebbe /^\d{8}$/. Se invece di otto numeri e una lettera, sono necessari dieci numeri e due lettere, il controllo sarebbe /^\d{10}{2}$/ e così via.
Il secondo controllo applica l’algoritmo del calcolo della lettera del DNI e lo confronta con la lettera fornita dall’utente. L’algoritmo di ciascun documento di identificazione è diverso, quindi questa parte della convalida deve essere adattata comodamente.
7.3.7. Convalida di un numero di telefono
I numeri di telefono possono essere indicati in modi molto diversi: con prefisso nazionale, con prefisso internazionale, raggruppato in coppia, separare i numeri con script, ecc.
Il seguente script ritiene che un numero di telefono consiste di nove cifre consecutive e senza spazi o script tra le figure:
valor = document.getElementById("campo").value;if( !(/^\d{9}$/.test(valor)) ) { return false;}
di nuovo, condizione di Javascript Si basa sull’uso di espressioni regolari, che verificano se il valore indicato è una successione di nove numeri consecutivi. Di seguito sono riportate altre espressioni regolari che possono essere utilizzate per altri formati di numero di telefono:
900900900 900-900-900 /^\d{3}-\d{3}-\d{3}$/ 900 900900 /^\d{3}\s\d{6}$/ 900 90 09 00 /^\d{3}\s\d{2}\s\d{2}\s\d{2}$/ (900) 900900 = “5b8eb2d591”>
/^\+\d{2,3}\s\d{9}$/ + seguito da 2 o 3 cifre), spazio vuoto e 9 figure consecutive 7.3.8. Convalidare che una casella di controllo è stata selezionata
Se è necessario selezionare una voce di controllo Tipo di controllo, JavaScript consente di controllarlo molto facilmente:
elemento = document.getElementById("campo");if( !elemento.checked ) { return false;}
Se è quello di verificare che tutte le caselle di controllo del modulo siano state selezionate, è più facile utilizzare un loop:
formulario = document.getElementById("formulario");for(var i=0; i<formulario.elements.length; i++) { var elemento = formulario.elements; if(elemento.type == "checkbox") { if(!elemento.checked) { return false; } }}
7.3.9. Convalida che un radiobutton è stato selezionato
Sebbene sia un caso simile a quello della casella di controllo, la convalida del radiobutton presenta una differenza importante: in generale, il controllo che viene eseguito è che l’utente ha Selezionato alcuni radiobutton di coloro che formano un determinato gruppo. Usando JavaScript, è facile determinare se è stato selezionato un gruppo RadioButton:
opciones = document.getElementsByName("opciones");var seleccionado = false;for(var i=0; i<opciones.length; i++) { if(opciones.checked) { seleccionado = true; break; }}if(!seleccionado) { return false;}
L’esempio precedente esegue tutto il radiobutor Formano un gruppo e controllano l’articolo per articolo se è stato selezionato. Quando viene trovato il primo RadioButton selezionato, lascia il loop e è indicato che almeno uno è stato selezionato.