Validation du mot de passe en JavaScript [explication étape par étape de la configuration]

Tout site Web prenant en charge l'authentification et l'autorisation demande toujours un nom d'utilisateur et un mot de passe lors de la connexion. Si ce n'est pas le cas, l'utilisateur doit s'inscrire et créer un mot de passe pour se connecter à la session suivante, et les sites Web ont donc tendance à fournir des protocoles ou des paramètres spécifiques. Les paramètres suivants sont couramment utilisés pour la validation du mot de passe sous n'importe quelle forme.

• Seules les entrées alphanumériques sont acceptées dans le champ du mot de passe.
• Il doit commencer par l'alphabet majuscule.
• Au moins un mot de passe alphabétique en majuscules.
• Le mot de passe doit avoir une longueur spécifique.
• Une valeur numérique doit être utilisée dans le mot de passe.
• Le mot de passe doit avoir une longueur minimale et maximale.

La validation du mot de passe en JavaScript garantit que ces paramètres sont respectés lorsque l'utilisateur crée un mot de passe. Les conditions données doivent être remplies pour la formation d'un mot de passe raisonnablement fort. La structure du mot de passe peut être validée par une expression régulière à l'aide de code JavaScript.

Pour traiter la validation du mot de passe à l'aide de JavaScript dans le champ du mot de passe, les étapes ci-dessous seront suivies.

Validation du mot de passe en Javascript

1. Créer un formulaire HTML

Le formulaire doit avoir des champs de base comme l'e-mail, le numéro de téléphone et le mot de passe. Voyons un exemple de code HTML pour définir la structure du formulaire.

< ! DOCTYPE html >

< html lang = "fr" >

< tête >

< jeu de caractères méta = "UTF-8" >

< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >

< titre > Formulaire </ titre >

</ tête >

< corps >

< classe div = "conteneur" >

< action du formulaire = "/action_page.php" >

< label for = "usrname" > Adresse e -mail </ label >

< input type = "text" id = "usrname" name = "usrname" obligatoire >

< label for = "psw" > Mot de passe </ label >

< type d'entrée = "mot de passe" id = "psw" nom = "psw" modèle = "(?=.*\d)(?=.*[az])(?=.*[AZ]).{8, }" title = "Doit contenir au moins un chiffre et une lettre majuscule et minuscule, et au moins 8 caractères ou plus" obligatoire >

< type d'entrée = "soumettre" valeur = "Soumettre" >

</ formulaire >

</ div >

< id div = "message" >

< h3 > Le mot de passe doit contenir les éléments suivants : </ h3 >

< p id = "letter" class = "invalide" > A < b > lettre minuscule </ b > </ p >

< p id = "capital" class = "invalide" > A < b > majuscule (majuscule) </ b > lettre </ p >

< p id = « nombre » class = « invalide » > A < b > nombre </ b ></ p >

< p id = "length" class = "invalide" > Minimum < b > 16 caractères </ b ></ p >

</ div >

</ corps >

</ html >

2. Ajouter CSS

entrée {

largeur : 100% ;

rembourrage : 12px ;

bordure : 1px solide #ccc ;

rayon de bordure : 4px ;

box-sizing : border-box ;

marge-haut : 6px ;

marge-bas : 16px ;

}

/* Personnaliser le bouton d'envoi */

entrée [ taper = envoyer ] {

couleur de fond : #4CAF50 ;

couleur : blanc ;

}

/* Styliser le conteneur pour les entrées */

.conteneur {

couleur de fond : #f1f1f1 ;

rembourrage : 20px ;

}

#message {

affichage : aucun ;

fond : #f1f1f1 ;

couleur : #000 ;

position : relative ;

rembourrage : 20px ;

marge-haut : 10px ;

}

#message p {

rembourrage : 10px 35px ;

taille de police : 18px ;

}

.valide {

couleur : RVB ( 3 , 184 , 190 );

}

.valide : avant {

position : relative ;

gauche : -35px ;

contenu : "&#10004;" ;

}

.invalide {

couleur : rouge ;

}

.invalide : avant {

position : relative ;

gauche : -35px ;

contenu : "&#10006;" ;

}

Checkout : Les meilleurs frameworks Javascript en 2021

3. Ajoutez JavaScript

var monEntrée = document . getElementById ( "psw" );

var lettre = document . getElementById ( "lettre" );

var majuscule = document . getElementById ( "capitale" );

var nombre = document . getElementById ( "nombre" );

var longueur = document . getElementById ( "longueur" )

monEntrée . focus = fonction () {

documenter . getElementById ( "message" ). style . display = "bloc" ;

}

monEntrée . onblur = fonction () {

documenter . getElementById ( "message" ). style . affichage = "aucun" ;

}

monEntrée . onkeyup = fonction () {

var lettresminuscules = / [ az ] / g ;

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

lettre . classList . supprimer ( "invalide" );

lettre . classList . ajouter ( "valide" );

} sinon {

lettre . classList . supprimer ( "valide" );

lettre . classList . ajouter ( "invalide" );

}

var lettres majuscules = / [ AZ ] / g ;

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

capitale . classList . supprimer ( "invalide" );

capitale . classList . ajouter ( "valide" );

} sinon {

capitale . classList . supprimer ( "valide" );

capitale . classList . ajouter ( "invalide" );

}

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

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

nombre . classList . supprimer ( "invalide" );

nombre . classList . ajouter ( "valide" );

} sinon {

nombre . classList . supprimer ( "valide" );

nombre . classList . ajouter ( "invalide" );

}

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

longueur . classList . supprimer ( "invalide" );

longueur . classList . ajouter ( "valide" );

} sinon {

longueur . classList . supprimer ( "valide" );

longueur . classList . ajouter ( "invalide" );

}

}

Le code JavaScript obtient initialement un élément par l'id ; après cela, il lui permet de s'afficher à l'écran. Il exécute également des conditions pour obtenir le mot de passe dans le format donné. Les alphabets majuscules, minuscules et les nombres sont validés par l'expression régulière créée dans le code.

4. Expressions régulières/REGEX

Les expressions régulières sont des modèles qui correspondent à la combinaison originale de littéraux passés dans le champ. Dans la validation de mot de passe, l'utilisation de l'expression régulière de JavaScript joue un rôle essentiel dans l'identification de la chaîne et si elle est au format donné ou non. Les expressions régulières sont des objets JavaScript. Ces expressions régulières sont écrites entre des barres obliques dans le code JavaScript pour la validation du mot de passe.

Exemple : let re=/ac-b/

Comment écrire une validation de mot de passe en JavaScript à l'aide d'une expression régulière ?

Une expression régulière est formée de caractères simples associés à des caractères spéciaux. L'expression régulière est formée selon les paramètres ou les contraintes d'un mot de passe fort. Les caractères spéciaux sont utilisés lorsqu'il existe une correspondance difficile de chaînes ou de caractères.

Le code JavaScript décrit ci-dessus utilisait des expressions régulières pour trouver des alphabets majuscules, des alphabets minuscules et des nombres. L'expression est faite avec différentes séquences et sous-séquences. Il existe certaines règles pour chaque caractère utilisé dans l'expression régulière.

Exemple : soit nombre=/[0-9]/g. Il accepte les nombres compris entre 0 et 9.

Paiement : Projets Javascript dans Github

Apprenez des cours de logiciels en ligne dans les meilleures universités du monde. Gagnez des programmes Executive PG, des programmes de certificat avancés ou des programmes de maîtrise pour accélérer votre carrière.

Conclusion

La validation du mot de passe est cruciale car elle permet à l'utilisateur de créer un mot de passe fort et évite toute fissure potentielle de mot de passe. En utilisant JavaScript, on peut ajouter de l'interactivité et donc informer l'utilisateur jusqu'à ce que le mot de passe contienne tous les caractères requis dans n'importe quelle séquence. L'expression régulière codée en JavaScript joue un rôle clé dans la définition des séquences. Il ramène les paramètres écrits au code JavaScript.

Si vous souhaitez en savoir plus sur le développement full-stack, consultez le programme Executive PG de upGrad & IIIT-B en développement logiciel full-stack, conçu pour les professionnels en activité et offrant plus de 500 heures de formation rigoureuse, plus de 9 projets et affectations. , statut d'anciens élèves de l'IIIT-B, projets de synthèse pratiques et aide à l'emploi avec les meilleures entreprises.