Come convalidare il modulo e-mail sul lato client in JavaScript
Sul lato cliente, e -mail I moduli sono validati per catturare dati non validi in modo che l'utente possa correggerli immediatamente. In altri casi, se i dati non validi vengono inviati al server, verranno rifiutati e il server corrispondente lo rispedirà al client.
Questo articolo discuterà Convalidamento modulo e -mailS SU il lato client In JavaScript. Quindi iniziamo!
Come convalidare il modulo e-mail sul lato client in JavaScript
Un'e -mail comprende un "corda,"Che è rappresentato come un sottoinsieme di caratteri ASCII, separato in due parti utilizzando il"@"Simbolo. Può essere scritto come "userinfo@dominio", Dove "userinfo"Sono le informazioni private dell'utente. La lunghezza del "userinfo"La parte non dovrebbe essere più di 64 personaggi, mentre il dominio il nome può avere 253 caratteri.
IL "userinfo"La parte può includere i caratteri ASCII di seguito:
- Numeri da 0 A 9.
- Maiuscolo (A-Z) e minuscolo (A-Z) Lettere inglesi.
- Personaggi speciali come ~ _ ' / ? - + = ^ | $ * ' ! & # %
- Puoi anche aggiungere un carattere d'epoca ".", Ma non dovrebbe essere il primo e l'ultimo carattere della parte" userinfo "e non ripeterlo dopo l'altro.
Il nome di dominio specificato nell'indirizzo e -mail, come org, info, net, com, us, può contenere cifre, lettere, trattini e piena stop.
Scopri di seguito alcuni esempi di ID e-mail validi e non validi:
Esempi di formato e -mail validi
Esempi di formato e -mail non valido
- galassia.com ("@"Il carattere non è aggiunto)
- [email protected] (il dominio di alto livello non può iniziare con ".")
- [email protected] (".UN"Non è un dominio di livello superiore valido)
- [email protected] (non avviare un ID e -mail con "." carattere)
- @Qualunque.dominio.netto ("userinfoLa parte è mancante prima del "@" carattere )
Ora dimostreremo un esempio pratico relativo al modulo di convalida dell'email in JavaScript.
Esempio: convalidare il modulo e -mail sul lato client in JavaScript
Prima di tutto, creeremo un modulo sul lato cliente con "ingresso"Campo per inserire l'ID e -mail e un"Invia"Pulsante per verificare il formato e -mail:
Si prega di inserire il tuo indirizzo email
Espressione regolare per la convalida del modulo e -mail sul lato client in JavaScript
In JavaScript, Espressioni regolari sono uno dei metodi più utili utilizzati per la convalida del formato e -mail. Rappresentano un carattere di pattern che viene confrontato con l'input dell'utente.
Nel nostro file JavaScript, aggiungeremo la seguente espressione regolare per convalidare l'ID e -mail inserito dall'utente:
MailFormat = /^\ w+([\.-"?\ w+)*@\ w+([\.-"?\ w+)*(\.\ w 2,3)+$/;L'espressione regolare di cui sopra ti consente di aggiungere lettere maiuscole (A-Z) e minuscole (A-Z), cifre (0-9), periodo "."E caratteri speciali come ~ _ ' / / ? - + = ^ | $ * ' ! & # %, nell'ID e -mail.
Creeremo un "ConvalidateMail ()"Funzione in JavaScript, che prenderà"testo di input"Come argomento. Successivamente, memorizzeremo l'espressione regolare menzionata nel "MailFormat". Il aggiunto "MailFormat"Viene quindi confrontato con l'input dell'utente. Se l'ID e -mail inserito ha un formato valido, verrà visualizzato un avviso sullo schermo con la stringa "Hai inserito un indirizzo email valido!". Altrimenti, ti farà sapere che l'ID e -mail non è valido:
funzione validatemail (inputText)var mailFormat = /^\ w+([\.-"?\ w+)*@\ w+([\.-"?\ w+)*(\.\ w 2,3)+$/;
if (InputText.valore.Match (MailFormat))
Avviso ("Hai inserito un indirizzo email valido!");
documento.Form1.Testo 1.messa a fuoco();
restituire vero;
altro
Avviso ("Indirizzo e -mail non valido");
documento.Form1.Testo 1.messa a fuoco();
restituire false;
Abbiamo anche impostato lo stile di elementi HTML per migliorare il loro aspetto nel modulo di convalida dell'email:
Ora apriremo il nostro "indice.HTML " File con l'aiuto del codice VS "Server live"Estensione:
Ecco che arriva il modulo di convalida dell'email con un campo di input e un pulsante di invio:
Per la prima volta, inseriremo un ID e -mail valido e:
Dopo aver fatto clic sul “Invia"Pulsante, viene visualizzata una casella di avviso nella nostra pagina Web, che afferma che l'indirizzo e -mail inserito è valido:
Ora, per verificare la presenza di un'e -mail non valida, scriveremo un'e -mail con un formato non valido e quindi fai clic sul pulsante di invio:
Puoi vedere che il nostro modulo di convalida e -mail funziona perfettamente per convalidare l'ID e -mail in base al formato specificato.
Conclusione
Utilizzando JavaScript, è possibile convalidare i moduli e-mail sul lato client. Il modulo di convalida e -mail creata si basa su requisiti dell'utente, come consentire espressioni regolari, accettare solo caratteri e cifre nell'ID e -mail o consentire solo domini specifici. La convalida dei moduli e -mail aiuta anche a inviare informazioni corrette e preziose al server. Questo articolo ha discusso della procedura di convalida dei moduli di posta elettronica sul lato client in JavaScript con l'aiuto di esempi appropriati.