Phenquestions
La convalida del modulo è la parte fondamentale e più importante del processo di sviluppo web. Di solito, la convalida del modulo viene eseguita sul lato server. La convalida del modulo aiuta a mostrare messaggi di errore all'utente se vengono forniti dati non necessari o errati o se un campo obbligatorio viene lasciato vuoto. Se il server trova un errore, restituisce quell'errore; quindi, mostriamo il messaggio di errore all'utente. Ma possiamo usare javascript nel front-end per convalidare i dati del modulo e mostrare subito gli errori. In questo articolo, impareremo la convalida dei moduli di base in javascript. Quindi, passiamo direttamente agli esempi e vediamo come possiamo farlo in javascript.
Esempi
Prima di tutto, assumiamo un modulo con il nome di "testForm", in cui abbiamo un campo di input con l'etichetta "Nome utente" e un tipo di input invia nel nostro file HTML. Nel tag form, abbiamo creato un evento onsubmit, in cui stiamo chiudendo e restituendo una funzione validateFunc().
Nel file di script, scriveremo la definizione della funzione di validateFunc(), che verrà eseguita ogni volta che l'utente preme il pulsante di invio. In quella funzione, convalideremo il campo di input del nome utente. Supponiamo di voler convalidare che il campo del nome utente sia vuoto o meno quando l'utente preme il pulsante di invio.
Quindi, per convalidare il campo del nome utente. Assegniamo prima una variabile al documento.testForm, solo per dare un aspetto pulito e comprensibile al codice. Quindi, nella definizione della funzione, scriveremo il codice per la convalida. Scriveremo un'istruzione if per controllare il campo del modulo vuoto. Se il campo nome utente è vuoto, mostreremo una casella di avviso per mostrare l'errore, ci concentreremo nuovamente sul campo nome utente e restituiremo false in modo che il modulo non venga inviato. Altrimenti, se supera il controllo e i dati vengono convalidati, restituiremo true alla funzione.
var theForm = documento.modulo di prova;// Codice di convalida del modulo
funzione validationFunc()
if (ilForm.nome.valore == "")
alert("il nome è vuoto");
il modulo.nome.messa a fuoco();
restituire falso;
ritorno (vero);
Dopo aver scritto tutto questo codice. Se eseguiamo il codice e facciamo clic sul pulsante di invio senza scrivere nulla nel campo del modulo.
Come puoi osservare nello screenshot allegato di seguito, genera un errore nella casella di avviso.
Questo è un esempio molto semplice ma valido per iniziare con l'implementazione della convalida del modulo. Per ulteriori implementazioni, come convalide multiple di moduli o per controllare anche la lunghezza dei caratteri.
A tal fine, supponiamo prima due campi del modulo nel tag del modulo con l'etichetta di "email" e "password" nel nostro file HTML.
Per la convalida in javascript, inseriremo nuovamente un'istruzione if per la convalida dei campi del modulo email e password nella definizione della funzione del file di script. Supponiamo di voler applicare più convalide sul campo email come il campo non dovrebbe essere vuoto e la sua lunghezza non dovrebbe essere inferiore a 10 caratteri. Quindi, possiamo usare OR "||" nell'istruzione if. Se si verifica uno di questi errori, mostrerà una finestra di avviso con il messaggio di errore che vogliamo mostrare, si concentrerà sul campo del modulo e-mail e restituirà false alla funzione. Allo stesso modo, se vogliamo applicare il controllo della lunghezza dei caratteri sul campo della password, possiamo farlo.
var theForm = documento.modulo di prova;// Codice di convalida del modulo
funzione validationFunc()
if (ilForm.nome.valore == "")
alert("il nome è vuoto");
il modulo.nome.messa a fuoco();
restituire falso;
if (ilForm.e-mail.valore == "" || il modulo.e-mail.valore.lunghezza < 10)
alert("L'email non è appropriata");
il modulo.e-mail.messa a fuoco();
restituire falso;
if (ilForm.parola d'ordine.valore.lunghezza < 6)
alert("La password deve essere lunga 6 caratteri");
il modulo.parola d'ordine.messa a fuoco();
restituire falso;
ritorno (vero);
Dopo aver scritto tutto questo codice, ricarica la pagina per avere il codice aggiornato. Ora, o lasciamo un campo e-mail vuoto o scriviamo un'e-mail con meno di 10 caratteri. In entrambi i casi, mostrerà un errore "L'email non è appropriata".
Quindi, ecco come possiamo applicare la convalida dei moduli di base in JavaScript. Possiamo anche applicare la convalida dei dati sul lato client utilizzando Regex o scrivendo la nostra funzione personalizzata. Supponiamo di voler applicare la convalida dei dati sul campo email. L'espressione regolare sarebbe così per convalidare un'e-mail.
se (/^[a-zA-Z0-9.!#$%&'*+/=?^_'|~-][email protetta][a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.prova (il modulo.e-mail.valore))
alert("L'email non è appropriata");
il modulo.e-mail.messa a fuoco() ;
restituire falso;
Questa era solo una dimostrazione di base della convalida dei dati utilizzando regex. Ma il cielo è aperto per farti volare.
Conclusione
Questo articolo tratta la convalida dei moduli di base in javascript. Abbiamo anche provato a intrufolarci nella convalida dei dati utilizzando regex. Se vuoi saperne di più sulle espressioni regolari, abbiamo un articolo dedicato relativo alle espressioni regolari su linuxhint.come. Per imparare e comprendere i concetti di javascript e contenuti più utili come questo, continua a visitare linuxhint.come. Grazie!
