Convalida del modulo JavaScript
La convalida del modulo è la parte di base 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 i messaggi di errore all'utente se vengono forniti dati non necessari o sbagliati o un campo richiesto viene lasciato vuoto. Se il server trova qualche errore, respinge quell'errore; Quindi, mostriamo il messaggio di errore all'utente. Ma possiamo usare JavaScript al front-end per convalidare i dati del modulo e mostrare immediatamente gli errori. In questo articolo, impareremo la convalida del modulo di base in JavaScript. Quindi, andiamo 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 si presenta nel nostro file HTML. Nel tag del modulo, abbiamo creato un evento OnSubmit, in cui stiamo chiudendo e restituendo una funzione ConvalidateFunc ().
Nel file di script, scriveremo la definizione della funzione di ConvalidateFunc (), che verrà eseguita ogni volta che l'utente colpisce il pulsante di invio. In quella funzione, convalideremo il campo di input del nome utente. Supponiamo che vogliamo convalidare il campo Nome utente è vuoto o meno quando l'utente colpisce il pulsante di invio.
Quindi, per convalidare il campo del nome utente. Prima assegniamo 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, concentrare di nuovo sul campo del nome utente e restituire false in modo che il modulo non venga inviato. Altrimenti, se passa il controllo e i dati vengono convalidati, torneremo fedele alla funzione.
var theform = documento.Testform;// Codice di convalida del modulo
Funzione validationFunc ()
if (il forma.nome.value == "")
avviso ("il nome è vuoto");
il modulo.nome.messa a fuoco();
restituire false;
restituire (vero);
Dopo aver scritto tutto questo codice. Se eseguiamo il codice e facciamo clic sul pulsante Invia senza scrivere nulla nel campo del modulo.
Come puoi osservare nello screenshot collegato di seguito, lancia un errore nella casella di avviso.
Questo è un esempio molto semplice ma buon per iniziare con l'implementazione della convalida del modulo. Per un'ulteriore implementazione, come le validazioni a più moduli o si desidera avere anche un controllo sulla lunghezza del carattere.
A tale scopo, supponiamo innanzitutto due campi del modulo nel tag modulo con l'etichetta di "e -mail" e "password" nel nostro file HTML.
Per la convalida in JavaScript, inseriremo nuovamente un'istruzione if per la convalida dei campi del modulo e -mail e password nella definizione della funzione del file di script. Supponiamo di voler applicare più convalide sul campo e -mail come se il campo non dovrebbe essere vuoto e che la sua lunghezza non dovrebbe essere inferiore a 10 caratteri. Quindi, possiamo usare o "||" nell'istruzione IF. Se si verificano uno di questi errori, mostrerà una casella di avviso con il messaggio di errore che vogliamo mostrare, concentrarsi sul campo del modulo e -mail e restituire False alla funzione. Allo stesso modo, se vogliamo applicare il controllo della lunghezza del carattere sul campo della password, possiamo farlo.
var theform = documento.Testform;// Codice di convalida del modulo
Funzione validationFunc ()
if (il forma.nome.value == "")
avviso ("il nome è vuoto");
il modulo.nome.messa a fuoco();
restituire false;
if (il forma.e-mail.Value == "" || il modulo.e-mail.valore.lunghezza < 10)
Avviso ("L'e -mail è inappropriata");
il modulo.e-mail.messa a fuoco();
restituire false;
if (il forma.parola d'ordine.valore.lunghezza < 6)
Avviso ("La password deve essere lunga 6 caratteri");
il modulo.parola d'ordine.messa a fuoco();
restituire false;
restituire (vero);
Dopo aver scritto tutto questo codice, ricarica la pagina per avere un codice aggiornato. Ora, o lasciamo un campo e -mail vuoto o scriviamo un'e -mail inferiore a 10 caratteri. In entrambi i casi, mostrerà un errore "e -mail è inappropriato".
Quindi, è così che possiamo applicare la convalida del modulo 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 e -mail. Il regex sarebbe così per la convalida di un'e -mail.
if (/^[a-za-z0-9.!#$%& '*+/=?^_ '| ~-]+@[a-za-z0-9-]+(?: \.[A-za-z0-9-]+)*$/.Test (The Form.e-mail.valore))
Avviso ("L'e -mail è inappropriata");
il modulo.e-mail.messa a fuoco() ;
restituire false;
Questa è stata solo una dimostrazione di base della convalida dei dati utilizzando Regex. Ma il cielo è aperto per farti volare.
Conclusione
Questo articolo copre la convalida del modulo di base in JavaScript. Abbiamo anche provato a fare un'idea della convalida dei dati utilizzando Regex. Se vuoi saperne di più su Regex, abbiamo un articolo dedicato relativo a Regex su LinuxHint.com. Per l'apprendimento e la comprensione dei concetti di JavaScript e contenuti più utili come questo, continua a visitare LinuxHint.com. Grazie!