Validarea parolei în JavaScript [Configurarea pas cu pas explicată]

Orice site web care acceptă autentificare și autorizare solicită întotdeauna un nume de utilizator și o parolă prin autentificare. Dacă nu este așa, utilizatorul trebuie să se înregistreze și să creeze o parolă pentru a se conecta la următoarea sesiune și, prin urmare, site-urile web tind să ofere protocoale sau parametri specifici. Următorii parametri sunt utilizați în mod obișnuit pentru validarea parolei sub orice formă.

• În câmpul pentru parolă sunt acceptate doar intrări alfanumerice.
• Ar trebui să înceapă cu alfabetul majuscul.
• Cel puțin o parolă cu majuscule.
• Parola ar trebui să aibă o anumită lungime.
• O singură valoare numerică trebuie utilizată în parolă.
• Parola trebuie să aibă o lungime minimă și maximă.

Validarea parolei în JavaScript asigură că acești parametri sunt urmați atunci când utilizatorul creează o parolă. Condițiile date trebuie îndeplinite pentru formarea unei parole destul de puternice. Structura parolei poate fi validată prin expresie regulată folosind codul JavaScript.

Pentru procesarea validării parolei folosind JavaScript în câmpul pentru parolă, ar fi urmați pașii de mai jos.

Validarea parolei în Javascript

1. Creați un formular HTML

Formularul ar trebui să aibă câmpuri de bază, cum ar fi e-mail, număr de telefon și parolă. Să vedem un exemplu de cod HTML pentru a defini structura formularului.

<! DOCTYPE html >

< html lang = „ro” >

< cap >

< meta charset = „UTF-8” >

< meta name = conținut „viewport” = „width=device-width, initial-scale=1.0” >

< title > Formular </ title >

</ cap >

< corp >

< div class = „container” >

< form action = „/action_page.php” >

< label for = „usrname” > Adresă de e-mail </ label >

< tipul de intrare = „text” id = „usrname” name = „usrname” necesar >

< label for = „psw” > Parolă </ label >

< tip de intrare = „parolă” id = „psw” nume = „psw” model = „(?=.*\d)(?=.*[az])(?=.*[AZ]).{8, }” title = „Trebuie să conțină cel puțin un număr și o literă mare și minusculă și cel puțin 8 caractere” necesare >

< tipul de intrare = „trimitere” valoare = „Trimitere” >

</ form >

</ div >

< div id = „mesaj” >

< h3 > Parola trebuie să conțină următoarele: </ h3 >

< p id = „litera” class = „invalid” > A < b > minuscule </ b > litera </ p >

< p id = „capitală” clasa = „invalid” > A < b > majusculă (majuscule) </ b > litera </ p >

< p id = „număr” clasa = „invalid” > A < b > număr </ b ></ p >

< p id = „lungime” class = „invalid” > Minimum < b > 16 caractere </ b ></ p >

</ div >

</ corp >

</ html >

2. Adăugați CSS

intrare {

latime : 100% ;

umplutură : 12px ;

chenar : 1px solid #ccc ;

raza-chenar : 4px ;

box-sizing : chenar-box ;

margin-top : 6px ;

margine-jos : 16px ;

}

/* Stilează butonul de trimitere */

intrare [ tip = trimite ] {

culoare de fundal : #4CAF50 ;

culoare : alb ;

}

/* Stilează containerul pentru intrări */

.container {

culoare de fundal : #f1f1f1 ;

umplutură : 20px ;

}

#mesaj {

afisaj : nici unul ;

fundal : #f1f1f1 ;

culoare : #000 ;

pozitia : relativa ;

umplutură : 20px ;

margine-top : 10px ;

}

#mesaj p {

umplutură : 10px 35px ;

dimensiunea fontului : 18px ;

}

.valid {

culoare : rgb ( 3 , 184 , 190 );

}

.valid:înainte de {

pozitia : relativa ;

stânga : -35px ;

conținut : „&#10004;” ;

}

.invalid {

culoare : rosu ;

}

.invalid:înainte de {

pozitia : relativa ;

stânga : -35px ;

conținut : „&#10006;” ;

}

Checkout: Cele mai bune cadre Javascript în 2021

3. Adăugați JavaScript

var myInput = document . getElementById ( „psw” );

var letter = document . getElementById ( „scrisoare” );

var capital = document . getElementById ( „capitala” );

var number = document . getElementById ( „număr” );

var lungime = document . getElementById ( „lungime” )

myInput . onfocus = function () {

document . getElementById ( „mesaj” ). stil . afișare = „blocare” ;

}

myInput . onblur = function () {

document . getElementById ( „mesaj” ). stil . afișare = „niciun” ;

}

myInput . onkeyup = function () {

var lowerCaseLetters = / [ az ] / g ;

dacă ( myInput . value . match ( minuscule )) {

scrisoarea . classList . eliminați ( „invalid” );

scrisoarea . classList . adăugați ( „valid” );

} altfel {

scrisoarea . classList . eliminați ( „valid” );

scrisoarea . classList . adăugați ( „invalid” );

}

var upperCaseLetters = / [ AZ ] / g ;

dacă ( myInput . value . match ( upperCaseLetters )) {

capital . classList . eliminați ( „invalid” );

capital . classList . adăugați ( „valid” );

} altfel {

capital . classList . eliminați ( „valid” );

capital . classList . adăugați ( „invalid” );

}

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

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

numarul . classList . eliminați ( „invalid” );

numarul . classList . adăugați ( „valid” );

} altfel {

numarul . classList . eliminați ( „valid” );

numarul . classList . adăugați ( „invalid” );

}

if ( myInput . value . length >= 8 ) {

lungime . classList . eliminați ( „invalid” );

lungime . classList . adăugați ( „valid” );

} altfel {

lungime . classList . eliminați ( „valid” );

lungime . classList . adăugați ( „invalid” );

}

}

Codul JavaScript primește inițial un element după id; după aceea, îi permite să fie afișat pe ecran. De asemenea, rulează condiții pentru a obține parola în formatul dat. Alfabetele majuscule, alfabetele mici și numerele sunt validate prin expresia regulată creată în cod.

4. Expresii regulate/REGEX

Expresiile regulate sunt modele care se potrivesc cu combinația originală de literale transmise în câmp. În validarea parolei, utilizarea expresiei regulate JavaScript joacă un rol esențial în identificarea șirului și dacă este în formatul dat sau nu. Expresiile regulate sunt obiecte JavaScript. Aceste expresii regulate sunt scrise între barele oblice în codul JavaScript pentru validarea parolei.

Exemplu: let re=/ac-b/

Cum se scrie validarea parolei în JavaScript folosind expresia regulată?

O expresie regulată este formată din caractere simple combinate cu caractere speciale. Expresia regulată se formează în funcție de parametrii sau constrângerile unei parole puternice. Caracterele speciale sunt folosite atunci când există o potrivire dură de șiruri sau caractere.

Codul JavaScript descris mai sus a folosit expresii regulate pentru a găsi alfabete mari, alfabete mici și numere. Exprimarea se face cu diferite secvente si subsecvente. Există anumite reguli pentru fiecare caracter care este folosit în expresia regulată.

Exemplu: fie număr=/[0-9]/g. Acceptă numerele din intervalul 0-9.

Checkout: Proiecte Javascript în Github

Învață cursuri de software online de la cele mai bune universități din lume. Câștigă programe Executive PG, programe avansate de certificat sau programe de master pentru a-ți accelera cariera.

Concluzie

Validarea parolei este crucială, deoarece permite utilizatorului să creeze o parolă puternică și evită orice posibilă spargere a parolei. Folosind JavaScript, se poate adăuga interactivitate și, prin urmare, se poate notifica utilizatorul până când parola are toate caracterele necesare în orice secvență. Expresia regulată codificată în JavaScript joacă un rol cheie în definirea secvențelor. Aduce parametrii scrisi în codul JavaScript.

Dacă sunteți interesat să aflați mai multe despre dezvoltarea full-stack, consultați programul Executive PG de la upGrad și IIIT-B în dezvoltarea software full-stack, care este conceput pentru profesioniști care lucrează și oferă peste 500 de ore de formare riguroasă, peste 9 proiecte și misiuni. , Statut de absolvenți IIIT-B, proiecte practice practice și asistență pentru locuri de muncă cu firme de top.