Panoramica della convalida dei moduli HTML
I moduli Web sono spesso la parte più utilizzata ed essenziale delle applicazioni Web. La convalida del modulo è il processo di convalida dei dati inseriti dall'utente rispetto alle regole predefinite. La convalida del modulo può avvenire sul lato client o sul lato server. La convalida del modulo HTML è la forma della convalida sul lato client in cui verrà eseguita la convalida dei dati prima di inviarli al server. La convalida dei moduli HTML è significativa e utile perché migliora l'interfaccia utente sul lato client e le prestazioni dell'applicazione Web.
Convalida del modulo HTML
Esistono principalmente due modi per eseguire la convalida dei moduli HTML,
- Utilizzo della funzionalità integrata HTML5
- Utilizzando JavaScript
1. Utilizzo della funzionalità integrata HTML5
HTML5 fornisce questa funzionalità di convalida dei moduli senza utilizzare JavaScript. Agli elementi del modulo verranno aggiunti attributi di convalida che consentiranno automaticamente la convalida del modulo per noi. Gli attributi di convalida ci consentono di specificare vari tipi di regole sui nostri elementi del modulo. Ci consentono di impostare la lunghezza dei dati, di limitare i valori dei dati, ecc.
Vediamo un semplice esempio di convalida dei moduli HTML che utilizza elementi di convalida dei moduli integrati e procederemo ulteriormente per la convalida dei moduli HTML utilizzando JavaScript.
Esempio
Convalida del modulo utilizzando l'attributo di convalida HTML5: in questo esempio utilizzeremo il tag di convalida del modulo richiesto che renderà obbligatori i dati in quel campo da inserire, altrimenti il modulo non verrà inviato. Di seguito è riportato lo snippet di codice per lo stesso insieme ad alcuni stili di un modulo web.
.formData (
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
background-color: darkcyan;
)
form (
font-size: 30px;
)
form input (
margin-left: 10px;
font-size: 15px;
)
Name:
Quindi abbiamo un modulo web molto semplice insieme a un solo campo di dati di input come "Nome". Si noti che abbiamo utilizzato la parola chiave richiesta nell'elemento tag di input.
Uscita :
Proviamo a inviare il modulo senza inserire alcun valore nel campo del nome. Al momento dell'invio, verrà visualizzato il messaggio di errore "Compila questo campo" e il modulo non verrà inviato.
Uscita con dati vuoti
Quindi si può vedere che il messaggio di errore non viene aggiunto da noi ed è fornito dallo stesso HTML.
Proprio come l'attributo richiesto fornito da HTML, ci sono vari tag di modulo che sono disponibili per l'uso. Di seguito è riportato l'elenco di alcuni tag di convalida del modulo,
- lunghezza minima: utilizzata per impostare la lunghezza minima richiesta di un elemento
- maxlength: utilizzato per impostare la lunghezza massima richiesta di un elemento
- modello: utilizzato per definire un'espressione regolare
2. Utilizzo di JavaScript
JavaScript è ampiamente utilizzato per la convalida dei moduli HTML in quanto offre più modi per personalizzare e impostare le regole di convalida, inoltre alcuni dei tag forniti in HTML5 non sono supportati nelle versioni precedenti di Internet Explorer. JavaScript viene utilizzato da molto tempo per la convalida del modulo.
Nella convalida del modulo JavaScript, fondamentalmente, definiamo le funzioni per convalidare i dati prima di inviarli al server. Siamo in grado di implementare qualsiasi logica richiesta per raggiungere le regole di validazione. JavaScript è più flessibile in questo modo perché non ci sono restrizioni sulla definizione delle regole. Ma è necessario avere conoscenza di JavaScript per implementarlo rispetto alla convalida del modulo utilizzando i tag integrati.
Vediamo l'esempio della convalida del modulo tramite JavaScript. Implementeremo lo stesso esempio del modulo con un solo input come elemento name.
Esempio:
.formData (
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
background-color: darkcyan;
position: absolute;
width: 100%;
)
form (
font-size: 30px;
)
form input (
margin-left: 10px;
font-size: 15px;
)
.errorMessage (
background-color: white;
width: 143px;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
margin-left: 107px;
visibility: hidden;
border-radius: 10px;
position: relative;
float: left;
)
.errorMessage.top-arrow:after (
content: " ";
position: absolute;
right: 90px;
top: -15px;
border-top: none;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-bottom: 15px solid white;
)
Name:
function validateForm() (
var nameVal = document.forms("simpleForm")("name").value;
if(nameVal == null || nameVal == "") (
document.getElementsByClassName( "errorMessage" )(0).style.visibility = "visible";
document.getElementsByClassName( "errorMessage" )(0).innerHTML = "Please Fill out this field";
return false;
) else (
return true;
)
)
Dall'esempio precedente, abbiamo rimosso il tag richiesto dall'elemento del modulo "nome". Invece abbiamo aggiunto un tag onsubmit nell'elemento modulo. Come accennato in precedenza, scriveremo la funzione per la convalida per cui viene aggiunto il tag.
Abbiamo scritto una funzione chiamata validateForm () che farà la validazione. Stiamo implementando la stessa regola per verificare se i dati inseriti nel campo del nome sono vuoti o meno. La logica per verificare ciò è su un clic del pulsante di invio, questa funzione verrà chiamata e il valore immesso verrà verificato se è nullo o vuoto. La funzione restituirà true nel caso in cui i dati non siano nulli o vuoti, ma se i dati sono vuoti o nulli, il messaggio di errore viene visualizzato all'utente.
Produzione
Se proviamo a inviare il modulo senza inserire alcun dato, dovremmo visualizzare il messaggio di errore sullo schermo. Come si può vedere dall'esempio che abbiamo progettato il messaggio di errore nello stesso modo possibile.
Uscita con dati vuoti
Conclusione - Convalida del modulo HTML
Quindi abbiamo visto un esempio molto semplice di validazione dei moduli sul lato client. Principalmente ci sono due modi per eseguire la convalida del modulo HTML. Innanzitutto utilizza la funzionalità integrata fornita in HTML5 e in secondo luogo utilizzando JavaScript. Utilizzando il primo metodo, non è necessario scrivere codice aggiuntivo.
Articoli consigliati
Questa è stata una guida alla convalida dei moduli HTML. Qui discutiamo la panoramica e due modi di convalida del modulo HTML con cui possono essere eseguiti. Puoi anche dare un'occhiata ai seguenti articoli per saperne di più -
- Eventi HTML
- Versioni di HTML
- Elementi HTML5
- Applicazioni di HTML