Gli utenti possono facilmente gestire la convalida dei moduli con l'aiuto di JavaScript ed espressioni regolari. I moduli sono cruciali per lavorare correttamente qualsiasi sito Web e la gestione di input non validi nei campi di forma è il lavoro del programmatore. Questo articolo ti mostrerà come creare un modulo e come inserire diversi controlli di convalida su diversi campi di modulo con l'aiuto di JavaScript.

Passaggio 1: impostare il documento HTML

Crea un nuovo documento HTML e digita le seguenti righe al suo interno per creare un modulo:

Questo è un esempio di validazione del modulo

Digita il tuo nome:

Digita il tuo indirizzo email

Digita il tuo contatto no#

Invia!

Nelle righe sopra:

• UN il tag viene utilizzato per creare un modulo con il nome impostato su validità e il metodo è impostato su "inviare". Inoltre, la proprietà OnSubmit è impostata su "Return FormSubmit ()" che esegue questo metodo al momento della presentazione e presenta solo il modulo se quel metodo restituisce vero.
• Dopodiché, usa semplicemente

  Tag per richiedere l'utente e Per prendere l'input dall'utente. Ricorda che ogni tag di input ha un nome univoco.

• Alla fine del modulo, crea un pulsante con il tipo impostato "invia".

Se il documento HTML viene caricato in un browser Web, mostrerà quanto segue:

La pagina Web richiede il nome, l'indirizzo e -mail e il numero di contatto dell'utente.

Passaggio 2: impostare il file JavaScript

In JavaScript, inizia creando i moduli di funzione () con le seguenti righe:

Funzione FormSubmit ()
// Tutte le righe successive saranno incluse nel corpo di questa funzione

Successivamente, crea tre variabili e memorizza i valori dai tre campi al suo interno usando le seguenti righe:

var firstName = documento.forme.validità.nome.valore;
var conactNumber = documento.forme.validità.e-mail.valore;
var emailADR = documento.forme.validità.tele.valore;

Nelle linee sopra, il "documento" L'oggetto è stato usato per ottenere il "forme" attributo, che è stato ulteriormente utilizzato con il nome della forma validità Per accedere ai tag di input con i loro nomi al suo interno.

Successivamente, definisci le espressioni regolari per il controllo della validità di ciascun campo con le seguenti righe:

var emailRegex = /^\ w+([\.-"?\ w+)*@\ w+([\.-"?\ w+)*(\.\ w 2,3)+$/g;
var teleregex = /^\ d 10 $ /;
var nameregex = /\ d+$ /g;

Nelle righe sopra:

• emailRegex controlla un indirizzo email valido con @ tra cui e persino consente un punto "."E un trattino
• Teleregex Controlla solo i caratteri numerici con la lunghezza massima di ingresso impostato su 10
• Nameregex Verifica per eventuali caratteri speciali o numeri all'interno del campo Nome

Successivamente, confronta le tre espressioni regolari con i rispettivi valori del campo di testo con l'aiuto di istruzioni IF e se un campo non è valido, restituire e avvisare semplicemente l'utente, per tutto ciò usa le seguenti righe:

if (FirstName == "" || Nameregex.test (firstName))
finestra.Avviso ("Nome non valido");
ReturnFalse;

if (emailADR == "" || !emailRegex.test (emailADR))
finestra.Avviso ("Immettere un indirizzo e-mail valido.");
ReturnFalse;

if (conactNumber == "" || !Teleregex.test (conactNumber))
Avviso ("Numero di telefono non valido");
ReturnFalse;

Successivamente, richiedere l'utente per ciò che gli input erano validi e restituiscono il valore come VERO:

Avviso ("Modulo inviato con informazioni corrette");
restituire vero;

Il codice JavaScript completo è come:

functionFormSubmit ()
var firstName = documento.forme.validità.nome.valore;
var conactNumber = documento.forme.validità.e-mail.valore;
var emailADR = documento.forme.validità.tele.valore;
var emailRegex = /^\ w+([\.-"?\ w+)*@\ w+([\.-"?\ w+)*(\.\ w 2,3)+$/g;
var teleregex = /^\ d 10 $ /;
var nameregex = /\ d+$ /g;
if (FirstName == "" || Nameregex.test (firstName))
finestra.Avviso ("Nome non valido");
ReturnFalse;

if (emailADR == "" || !emailRegex.test (emailADR))
finestra.Avviso ("Immettere un indirizzo e-mail valido.");
ReturnFalse;

if (conactNumber == "" || !Teleregex.test (conactNumber))
Avviso ("Numero di telefono non valido");
ReturnFalse;

Avviso ("Modulo inviato con informazioni corrette");
ReturnTrue;

Passaggio 3: testare la convalida del modulo

Eseguire il funzionamento della convalida del modulo eseguendo il documento HTML e digitando i dati nei campi di input. Fornire un nome non valido con caratteri speciali o numeri al suo interno

La pagina web ha richiesto all'utente che il nome non era valido.

Riprova con il nome corretto e l'indirizzo e -mail errato:

L'utente è stato avvisato che l'indirizzo e -mail non è valido.

Successivamente, prova con un nome valido e un indirizzo email valido ma con un numero di contatto non valido come:

La pagina Web ha richiesto all'utente che il numero di contatto non è valido.

Successivamente, per il test finale, fornire tutte le informazioni corrette come:

Con tutte le informazioni corrette fornite, la convalida del modulo ha esito positivo e l'applicazione Web può andare avanti.

Conclusione

La convalida del modulo può essere implementata su un modulo HTML con JavaScript, espressioni regolari e un po 'di costruzione logica. Le espressioni regolari possono definire l'input accettato corretto per un campo. Successivamente, l'espressione regolare può essere abbinata al valore del rispettivo campo di input usando il metodo test (). Questo vale anche per altri tipi di campi di input, può essere per l'indirizzo, il codice postale o il nome del paese.