La convalida è il processo che garantisce che i dati siano corretti e completi.
In un esempio reale, supponiamo che un sito richieda il completamento di un modulo di registrazione prima di ottenere l'accesso completo a questo sito. La pagina di registrazione avrebbe campi di input per nome utente, password, ID e-mail e così via.
Quando l'utente invia il modulo, normalmente si verifica una convalida prima che i dettagli vengano inviati al server. Questa convalida cercherebbe di garantire nella misura migliore possibile che i dettagli per i campi di input siano inseriti nel modo corretto.
Ad esempio, l'ID e-mail deve sempre essere nel formato Questo indirizzo e-mail è protetto dallo spam bot. Devi abilitare JavaScript per vederlo. ; se qualcuno inserisce solo il nome utente nell'ID e-mail, idealmente la convalida dovrebbe fallire. Quindi la convalida esamina l'esecuzione di questi controlli di base prima che i dettagli vengano inviati al server per un'ulteriore elaborazione.
In questo tutorial imparerai-
- Convalida del modulo utilizzando HTML5
- Convalida del modulo utilizzando $ dirty, $ valid, $ invalid, $ pristine
- Convalida del modulo utilizzando AngularJS Auto Validate
- Feedback degli utenti con i pulsanti Ladda
Convalida del modulo utilizzando HTML5
La convalida del modulo è il processo di pre-convalida delle informazioni inserite in un modulo Web dall'utente prima che vengano inviate al server. È sempre meglio convalidare le informazioni sul lato client stesso. Questo perché aggiunge meno overhead se l'utente doveva essere presentato di nuovo con il modulo se le informazioni inserite erano sbagliate.
Diamo un'occhiata a come può essere condotta la convalida del modulo in HTML5.
Nel nostro esempio, mostreremo all'utente un semplice modulo di registrazione in cui l'utente deve inserire dettagli come nome utente, password, ID e-mail ed età.
Il modulo avrà controlli di convalida per garantire che l'utente inserisca le informazioni in modo corretto.
Event Registration Guru99 Global Event
Spiegazione del codice:
- Per il tipo di input di testo, utilizziamo l'attributo "obbligatorio". Ciò significa che la casella di testo non può essere vuota quando il modulo viene inviato e nella casella di testo dovrebbe essere presente una sorta di testo.
- Il prossimo tipo di input è la password. Poiché il tipo di input è contrassegnato come password, quando l'utente inserisce un testo nel campo, verrà mascherato.
- Poiché il tipo di input è specificato come e-mail, il testo nella casella deve corrispondere al modello. Questo indirizzo e-mail è protetto dallo spam bot. Devi abilitare JavaScript per vederlo. .
- Quando il tipo di input è contrassegnato come un numero, se un utente tenta di inserire qualsiasi carattere utilizzando la tastiera o l'alfabeto, non verrà inserito nella casella di testo.
Se il codice viene eseguito correttamente, verrà visualizzato il seguente output quando si esegue il codice nel browser.
Produzione:
Per vedere la convalida del modulo in azione, fare clic sul pulsante Invia senza inserire alcuna informazione sullo schermo.
Dopo aver fatto clic sul pulsante di invio, verrà visualizzato un popup che mostra un errore di convalida che il campo deve essere riempito.
Quindi la convalida per il controllo che è stato contrassegnato come richiesto, fa visualizzare il messaggio di errore se l'utente non inserisce alcun valore nel campo di testo.
Quando l'utente immette un valore nel controllo della password, noterai il simbolo "*" utilizzato per mascherare i caratteri immessi.
Immettere quindi un ID e-mail errato e fare clic sul pulsante di invio. Dopo aver fatto clic sul pulsante di invio, verrà visualizzato un popup che mostra un errore di convalida che il campo deve avere il simbolo @.
Quindi la convalida per il controllo che è stato contrassegnato come controllo di posta elettronica causerà la visualizzazione del messaggio di errore se l'utente non immette un ID di posta elettronica appropriato nel campo di testo.
Infine, quando si tenta di inserire qualsiasi carattere nel controllo del testo dell'età, non verrà inserito sullo schermo. Il controllo verrà compilato con un valore solo quando viene immesso un numero nel controllo.
Convalida del modulo utilizzando $ dirty, $ valid, $ invalid, $ pristine
AngularJS fornisce le sue proprietà aggiuntive per la convalida. AngularJS fornisce le seguenti proprietà per i controlli a scopo di convalida
- $ dirty: l'utente ha interagito con il controllo
- $ valido - Il contenuto del campo è valido
- $ invalid - Il contenuto del campo non è valido
- $ pristine: l'utente non ha ancora interagito con il controllo
Di seguito sono riportati i passaggi da seguire per eseguire la convalida angolare.
Passaggio 1) Utilizzare la proprietà no validate quando si dichiara il modulo. Questa proprietà dice a HTML5 che la convalida sarebbe stata eseguita da AngularJS.
Passaggio 2) Assicurati che il modulo abbia un nome definito per esso. La ragione per farlo è che, quando si esegue la convalida angolare, verrà utilizzato il nome del modulo.
Passaggio 3) Assicurarsi che ogni controllo abbia anche un nome definito per esso. La ragione per farlo è che, quando si esegue la convalida angolare, verrà utilizzato il nome del controllo.
Passaggio 4) Utilizzare la direttiva ng-show per verificare le proprietà $ dirty, $ invalid e $ valid per i controlli.
Diamo un'occhiata a un esempio, che incorpora i passaggi sopra menzionati.
Nel nostro esempio,
Avremo solo un semplice campo di testo in cui l'utente deve inserire un nome di argomento nella casella di testo. In caso contrario, verrà attivato un errore di convalida e all'utente verrà visualizzato il messaggio di errore.
Event Registration Guru99 Global Event
Spiegazione del codice:
- Nota che abbiamo dato un nome al Form che è "myForm". Ciò è necessario quando si accede ai controlli sul modulo per la convalida di AngularJS.
- Utilizzo della proprietà "novalidate" per garantire che il form HTML consenta ad AngularJS di eseguire la convalida.
- Stiamo usando la direttiva ng-show per controllare la proprietà "$ dirty" e "$ invalid". Ciò significa che se la casella di testo è stata modificata, il valore della proprietà "$ dirty" sarà vero. Inoltre, nel caso in cui il valore della casella di testo sia nullo, la proprietà "$ invalid" diventerà vera. Quindi, se entrambe le proprietà sono vere, la convalida fallirà per il controllo. Quindi, se entrambi i valori sono veri, anche ng-show diventerà vero e verrà visualizzato il controllo dello span con i caratteri di colore rosso.
- In questo, stiamo controllando la proprietà "$ error" che restituisce anche true perché abbiamo menzionato per il controllo che il valore dovrebbe essere immesso per il controllo. In tal caso, dove non ci sono dati inseriti nella casella di testo, il controllo dello span visualizzerà il testo "Username is required".
- Se il valore del controllo della casella di testo non è valido, si desidera disabilitare anche il pulsante di invio in modo che l'utente non possa inviare il modulo. Stiamo utilizzando la proprietà "ng-disabled" per il controllo per eseguire questa operazione in base al valore condizionale delle proprietà "$ dirty" e "$ invalid" del controllo.
- Nel controller, stiamo solo impostando il valore iniziale del valore della casella di testo sul testo "AngularJS". Questo viene fatto solo per impostare un valore predefinito per la casella di testo quando il modulo viene visualizzato per la prima volta. Mostra meglio come avviene la convalida per il campo della casella di testo.
Se il codice viene eseguito correttamente, verrà visualizzato il seguente output quando si esegue il codice nel browser.
Produzione:
Quando il modulo viene inizialmente visualizzato, la casella di testo mostra il valore di "AngularJS" e il "pulsante di invio" è abilitato. Non appena rimuovi il testo dal controllo, il messaggio di errore di convalida viene abilitato e il pulsante Invia viene disabilitato.
Lo screenshot sopra mostra due cose
- Il pulsante Invia è disabilitato
- Non è presente alcun nome di argomento nella casella di testo Argomento. Quindi, genera il messaggio di errore "è richiesto il nome utente".
Convalida del modulo utilizzando AngularJS Auto Validate
C'è una funzione in AngularJS per convalidare automaticamente tutti i controlli su un modulo senza la necessità di scrivere codice personalizzato per la convalida. Questo può essere fatto includendo un modulo personalizzato chiamato "jcs-AutoValidate".
Con questo modulo in posizione, non è necessario inserire alcun codice speciale per eseguire la convalida o visualizzare i messaggi di errore. Tutto questo è gestito dal codice all'interno di JCS-AutoValidate.
Diamo un'occhiata a un semplice esempio di come ottenere questo risultato.
In questo esempio,
Avremo solo un semplice modulo con un controllo casella di testo che è un campo obbligatorio. Se questo controllo non è compilato, dovrebbe essere visualizzato un messaggio di errore.
Event Registration Guru99 Event
Spiegazione del codice:
- Innanzitutto, dobbiamo includere lo script "jcs-auto-validate.js" che ha tutte le funzionalità di convalida automatica.
- Dobbiamo assicurarci che ogni elemento compreso il "tag div" sia inserito in una classe "form-group".
- È inoltre necessario assicurarsi che ogni elemento (che è un elemento HTML come il controllo di input, il controllo span, il controllo div e così via) come i controlli di input siano anche inseriti nella classe form-group.
- Includi jcs-autovalidate nel tuo modulo JS AngularJS.
Se il codice viene eseguito correttamente, verrà visualizzato il seguente output quando si esegue il codice nel browser.
Produzione:
Per impostazione predefinita, quando esegui il codice, il modulo sopra verrà mostrato come da codice HTML.
Se provi a inviare il modulo, verrà visualizzato il messaggio di errore che dice "Questo campo è obbligatorio". Tutto questo viene fatto dall'opzione JCS-AutoValidate.
Feedback degli utenti con i pulsanti Ladda
I pulsanti "ladda" sono un framework speciale costruito per i pulsanti sopra JavaScript per dare un effetto visivo ai pulsanti quando vengono premuti.
Quindi se a un pulsante viene assegnato l'attributo "ladda" e viene premuto, verrà mostrato un effetto di rotazione. Inoltre, sono disponibili diversi stili di dati per il pulsante per fornire effetti visivi aggiuntivi.
Vediamo un esempio di come vedere i pulsanti "ladda" in azione. Vedremo solo un semplice modulo che ha un pulsante di invio. Quando si preme il pulsante, verrà visualizzato un effetto di rotazione sul pulsante.
Event Registration Guru99 Event
Spiegazione del codice:
- Stiamo usando la direttiva "ng-submit" per chiamare una funzione chiamata "submit". Questa funzione verrà utilizzata per modificare l'attributo ladda del pulsante di invio.
- L'attributo ladda è un attributo speciale del framework ladda. È questo attributo che aggiunge l'effetto di rotazione al controllo. Stiamo impostando il valore dell'attributo ladda sull'invio della variabile.
- La proprietà data-style è di nuovo un attributo aggiuntivo offerto dal framework ladda, che aggiunge semplicemente un diverso effetto visivo al pulsante di invio.
- Il modulo 'AngularJS-ladda' deve essere aggiunto all'applicazione AngularJS.JS affinché il framework ladda funzioni.
- Inizialmente, stiamo definendo e impostando il valore di una variabile chiamata "invio" su false. Questo valore è impostato per l'attributo ladda del pulsante di invio. Impostando inizialmente questo a false stiamo dicendo che non vogliamo che il pulsante di invio abbia ancora l'effetto ladda.
- Stiamo dichiarando una funzione che viene chiamata quando viene premuto il pulsante di invio. In questa funzione, impostiamo "invio" su true. Questo farà sì che l'effetto ladda venga applicato al pulsante di invio.
Se il codice viene eseguito correttamente, verrà visualizzato il seguente output quando si esegue il codice nel browser.
Produzione:
Quando il modulo viene visualizzato inizialmente, il pulsante di invio viene mostrato nella sua forma semplice.
Quando si preme il pulsante di invio, la variabile di invio nel controller è impostata su true. Questo valore viene passato all'attributo "ladda" del pulsante di invio che causa l'effetto di rotazione del pulsante.
Sommario
- La convalida per i controlli HTML della casella di testo può essere eseguita utilizzando l'attributo "obbligatorio".
- In HTML5, sono stati aggiunti nuovi controlli come password, e-mail e numero che forniscono il proprio set di convalide.
- La convalida del modulo in AngularJS viene gestita osservando i valori $ dirty, $ valid, $ invalid e $ pristine di un controllo del modulo.
- La convalida automatica nelle applicazioni AngularJS può essere ottenuta anche utilizzando il modulo di convalida automatica JCS.
- I pulsanti Ladda possono essere aggiunti a un'applicazione Angular.js per dare un tocco visivo migliorato all'utente quando viene premuto il pulsante.