Convalida della password in JavaScript [Spiegazione della configurazione passo passo]

Qualsiasi sito Web che supporta l'autenticazione e l'autorizzazione richiede sempre un nome utente e una password tramite il login. In caso contrario, l'utente deve registrarsi e creare una password per accedere alla sessione successiva, quindi i siti Web tendono a fornire protocolli o parametri specifici. I seguenti parametri sono comunemente usati per la convalida della password in qualsiasi forma.

• Nel campo password sono accettati solo input alfanumerici.
• Dovrebbe iniziare con l'alfabeto maiuscolo.
• Almeno una password alfabetica maiuscola.
• La password deve essere di una lunghezza specifica.
• Nella password deve essere utilizzato un valore numerico.
• La password deve avere una lunghezza minima e massima.

La convalida della password in JavaScript garantisce che questi parametri vengano seguiti quando l'utente crea una password. Le condizioni indicate devono essere soddisfatte per la formazione di una password ragionevolmente forte. La struttura della password può essere convalidata da un'espressione regolare utilizzando il codice JavaScript.

Per elaborare la convalida della password utilizzando JavaScript nel campo della password, verranno seguiti i passaggi seguenti.

Convalida della password in Javascript

1. Crea un modulo HTML

Il modulo dovrebbe avere campi di base come e-mail, numero di telefono e password. Vediamo un esempio di codice HTML per definire la struttura del form.

<! DOCTYPE html >

< lingua html = “it” >

< testa >

< metacarattere = " UTF -8" >

< meta name = contenuto “viewport” = “width=device-width, initial-scale=1.0” >

< titolo > Modulo </ titolo >

</ testa >

< corpo >

< classe div = “contenitore” >

< form action = “/action_page.php” >

< label for = “usrname” > Indirizzo e-mail </ label >

< tipo di input = “testo” id = “usrname” name = “usrname” obbligatorio >

< label for = “psw” > Password </ label >

< tipo di input = "password" id = "psw" nome = "psw" modello = "(?=.*\d)(?=.*[az])(?=.*[AZ]).{8, }” title = “Deve contenere almeno un numero e una lettera maiuscola e minuscola e almeno 8 o più caratteri” obbligatori >

< tipo di input = valore "invia" = "invia" >

</ modulo >

</ div >

< div id = “messaggio” >

< h3 > La password deve contenere quanto segue: </ h3 >

< p id = “lettera” class = “non valido” > A < b > minuscolo </ b > lettera </ p >

< p id = “capitale” class = “non valido” > A < b > maiuscolo (maiuscolo) </ b > lettera </ p >

< p id = “numero” classe = “non valido” > A < b > numero </ b ></ p >

< p id = "lunghezza" classe = "non valido" > Minimo < b > 16 caratteri </ b ></ p >

</ div >

</ corpo >

</ html >

2. Aggiungi CSS

ingresso {

larghezza : 100% ;

imbottitura : 12px ;

bordo : 1px solido #ccc ;

raggio di confine : 4px ;

formato scatola : border-box ;

margine superiore : 6px ;

margine inferiore : 16px ;

}

/* Dai uno stile al pulsante di invio */

inserisci [ tipo = invia ] {

colore di sfondo : #4CAF50 ;

colore : bianco ;

}

/* Disegna lo stile del contenitore per gli input */

.container {

colore di sfondo : #f1f1f1 ;

imbottitura : 20px ;

}

#messaggio {

display : nessuno ;

sfondo : #f1f1f1 ;

colore : #000 ;

posizione : relativa ;

imbottitura : 20px ;

margine superiore : 10px ;

}

#messaggio p {

imbottitura : 10px 35px ;

dimensione del carattere : 18px ;

}

.valido {

colore : rgb ( 3 , 184 , 190 );

}

.valido:prima di {

posizione : relativa ;

a sinistra : -35px ;

contenuto : "&#10004;" ;

}

.non valido {

colore : rosso ;

}

.non valido:prima di {

posizione : relativa ;

a sinistra : -35px ;

contenuto : "&#10006;" ;

}

Checkout: i migliori framework Javascript nel 2021

3. Aggiungi JavaScript

var myInput = documento . getElementById ( "psw" );

var lettera = documento . getElementById ( "lettera" );

var capitale = documento . getElementById ( "capitale" );

var numero = documento . getElementById ( "numero" );

var lunghezza = documento . getElementById ( "lunghezza" )

mio ingresso . messa a fuoco = funzione () {

documento . getElementById ( "messaggio" ). stile . display = “blocco” ;

}

mio ingresso . onblur = funzione () {

documento . getElementById ( "messaggio" ). stile . display = “nessuno” ;

}

mio ingresso . onkeyup = funzione () {

var lowerCaseLetters = / [ az ] / g ;

if ( myInput . value . match ( lowerCaseLetters )) {

lettera . elenco di classi . rimuovere ( "non valido" );

lettera . elenco di classi . aggiungere ( "valido" );

} altro {

lettera . elenco di classi . rimuovere ( "valido" );

lettera . elenco di classi . aggiungere ( "non valido" );

}

var lettere maiuscole = / [ AZ ] / g ;

if ( myInput . value . match ( upperCaseLetters )) {

capitale . elenco di classi . rimuovere ( "non valido" );

capitale . elenco di classi . aggiungere ( "valido" );

} altro {

capitale . elenco di classi . rimuovere ( "valido" );

capitale . elenco di classi . aggiungere ( "non valido" );

}

var numeri = / [ 0-9 ] / g ;

if ( myInput . value . match ( numeri )) {

numero . elenco di classi . rimuovere ( "non valido" );

numero . elenco di classi . aggiungere ( "valido" );

} altro {

numero . elenco di classi . rimuovere ( "valido" );

numero . elenco di classi . aggiungere ( "non valido" );

}

if ( mioInput . valore . lunghezza >= 8 ) {

lunghezza . elenco di classi . rimuovere ( "non valido" );

lunghezza . elenco di classi . aggiungere ( "valido" );

} altro {

lunghezza . elenco di classi . rimuovere ( "valido" );

lunghezza . elenco di classi . aggiungere ( "non valido" );

}

}

Il codice JavaScript inizialmente ottiene un elemento dall'id; dopodiché, gli consente di visualizzare sullo schermo. Esegue anche le condizioni per ottenere la password nel formato specificato. Gli alfabeti maiuscoli, minuscoli e numeri vengono convalidati tramite l'espressione regolare creata nel codice.

4. Espressioni regolari/REGEX

Le espressioni regolari sono modelli che corrispondono alla combinazione originale di letterali passati nel campo. Nella convalida della password, l'uso dell'espressione regolare di JavaScript gioca un ruolo essenziale nell'identificazione della stringa e nel fatto che sia nel formato specificato o meno. Le espressioni regolari sono oggetti JavaScript. Queste espressioni regolari vengono scritte tra le barre nel codice JavaScript per la convalida della password.

Esempio: let re=/ac-b/

Come scrivere la convalida della password in JavaScript usando l'espressione regolare?

Un'espressione regolare è formata da caratteri semplici combinati con caratteri speciali. L'espressione regolare viene formata in base ai parametri o ai vincoli di una password complessa. I caratteri speciali vengono utilizzati quando esiste una corrispondenza difficile di stringhe o caratteri.

Il codice JavaScript illustrato sopra utilizzava espressioni regolari per trovare alfabeti maiuscoli, alfabeti minuscoli e numeri. L'espressione è composta da diverse sequenze e sottosequenze. Ci sono alcune regole per ogni carattere che viene utilizzato nell'espressione regolare.

Esempio: let number=/[0-9]/g. Accetta i numeri nell'intervallo 0-9.

Checkout: Progetti Javascript in Github

Impara i corsi di software online dalle migliori università del mondo. Guadagna programmi Executive PG, programmi di certificazione avanzati o programmi di master per accelerare la tua carriera.

Conclusione

La convalida della password è fondamentale in quanto consente all'utente di creare una password complessa ed evita potenziali crack della password. Utilizzando JavaScript, è possibile aggiungere interattività e quindi avvisare l'utente fino a quando la password non ha tutti i caratteri richiesti in qualsiasi sequenza. L'espressione regolare codificata in JavaScript gioca un ruolo chiave nella definizione delle sequenze. Riporta i parametri scritti al codice JavaScript.

Se sei interessato a saperne di più sullo sviluppo full-stack, dai un'occhiata al programma Executive PG di upGrad & IIIT-B in Full-stack Software Development, progettato per i professionisti che lavorano e offre oltre 500 ore di formazione rigorosa, oltre 9 progetti e incarichi , status di Alumni IIIT-B, progetti pratici pratici e assistenza sul lavoro con le migliori aziende.