Comment créer un validateur de mot de passe en JavaScript

Posté Par: Windows2022tutosur: janvier 05, 2023Dans: TechPas De Commentaires

Comment créer un validateur de mot de passe en JavaScript

Introduction

Dans ce tutoriel, nous allons créer un Comment créer un validateur de mot de passe en JavaScript. Ce tutoriel a pour but de valider le mot de passe que vous avez saisi. Cela couvrira toutes les fonctions de base qui valideront votre mot de passe dans la zone de texte. Je vais fournir un exemple de programme pour montrer le codage réel de ce tutoriel.

Ce tutoriel est simple et facile à comprendre, il suffit de suivre les instructions que j’ai fournies et vous pouvez le faire sans problème. Ce programme peut être utilisé sur n’importe quel système nécessitant un mot de passe plus fort pour éviter d’être piraté. Je ferai de mon mieux pour vous fournir le moyen le plus simple de créer ce programme Validateur de mot de passe. Faisons donc le codage.

Avant de commencer :

Ceci est le lien pour le modèle que j’ai utilisé pour la conception de la mise en page https://getbootstrap.com/.

Création de l’interface

C’est ici que nous allons créer une interface simple pour notre application. Ce code n’affichera que les boutons et les zones de texte. Pour le créer, copiez-le simplement et écrivez-le dans votre éditeur de texte, puis enregistrez-le sous index.html.

<!DOCTYPE html>
		<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
	<nav class="navbar navbar-default">
		<div class="container-fluid">
			<a class="navbar-brand" href="https://sourcecodester.com">Sourcecodester</a>
	<div class="col-md-6 well">
		<h3 class="text-primary">How to Create a Password Validator in JavaScript</h3>
		<hr style="border-top:1px dotted #ccc;"/>
				<input type="password" id="password" class="form-control" placeholder="Enter Password"/>
					<span id="chk_capital" class="alert-danger"></span>
					<span id="chk_number" class="alert-danger"></span>
					<span id="chk_length" class="alert-danger"></span>
					<button type="button" onclick="validatePassword()" id="btn_check" class="btn btn-primary form-control">Validate</button>

Création d’une fonction JavaScript

C’est là que se trouve la fonction principale de l’application. Ce code validera le mot de passe que vous avez entré dans la zone de texte. Pour ce faire, copiez et écrivez simplement ce bloc de codes dans l’éditeur de texte et enregistrez-le sous script.js.

document.getElementById("res").style.display="none";
function validatePassword(){
	let chk_capital = document.getElementById('chk_capital');
	let chk_number = document.getElementById('chk_number');
	let chk_length = document.getElementById('chk_length');

  


	let bool_capital;
	let bool_number;
	let bool_length;
	let password = document.getElementById('password');
 
	if(password.value.length > 12){
		chk_length.removeAttribute('class');
		chk_length.setAttribute('class', 'alert-success');
		chk_length.innerHTML = "&#10004; Must be a 12 characters long";
		bool_length = true;
	}else{
		chk_length.removeAttribute('class');
		chk_length.setAttribute('class', 'alert-danger');
		chk_length.innerHTML = "X Must be a 12 characters long";
		bool_length = false;
	}
 
	if(password.value.search(/[0-9]/) > ){
		chk_number.removeAttribute('class');
		chk_number.setAttribute('class', 'alert-success');
		chk_number.innerHTML = "&#10004; Must have a number digit";
		bool_number = true;
	}else{
		chk_number.removeAttribute('class');
		chk_number.setAttribute('class', 'alert-danger');
		chk_number.innerHTML = "X Must have a number digit";
		bool_number = false;
	}
 
	if(password.value.match(/[A-Z]/)){
		chk_capital.removeAttribute('class');
		chk_capital.setAttribute('class', 'alert-success');
		chk_capital.innerHTML = "&#10004; Must have one Uppercase letter";
		bool_capital = true;
	}else{
		chk_capital.removeAttribute('class');
		chk_capital.setAttribute('class', 'alert-danger');
		chk_capital.innerHTML = "X Must have one Uppercase letter";
		bool_capital = false;
	}
 
	document.getElementById("res").style.display="inline-block";
 
	if(bool_capital && bool_length && bool_number){
		document.getElementById('btn_check').innerHTML = "Password Validated";
	}else{
		document.getElementById('btn_check').innerHTML = "Validate";
	}
 
}

Dans le code ci-dessus, nous avons simplement créé une méthode qui permet la validation du mot de passe que vous avez entré. Nous nommerons la méthode comme validerMotDePasse(), cette fonction ne sera déclenchée que lorsque le bouton sera cliqué. Dans la fonction, nous utilisons simplement plusieurs instructions conditionnelles pour suivre le caractère saisi dans la zone de texte, pour vérifier s’il est autorisé à être validé.

Production:

Le Comment créer un validateur de mot de passe en JavaScript le code source que je fournis peut être téléchargé ci-dessous. Veuillez cliquer sur le bouton de téléchargement.

Voilà, nous avons créé avec succès Comment créer un validateur de mot de passe en JavaScript. J’espère que ce tutoriel simple vous aidera à ce que vous recherchez. Pour plus de mises à jour et de tutoriels, veuillez simplement visiter ce site. Profitez du codage !

Plus de tutoriels pour le langage JavaScript

Tutoriels JavaScript

Télécharger ici