JavaScript, jQuery et Regex | Sécuriser un mot de passe en temps réel avec JS

Voici comment sécuriser un mot de passe en front avec JavaScript couplé à jQuery et les expressions régulières (Regex) :

Vous souhaitez vérifier en front que l’utilisateur a bien saisi 8 caractères, un chiffre et ou une majuscule ? Je vais vous guider sur la procédure à suivre.

Il faut pour suivre cette procédure avoir jQuery d’installé, ce n’est pas obligatoire, mais l’utilisant, vous n’aurez pas le même code que moi en javascript natif.

Dans mon cas, j’utilise la librairie CSS Bulma pour faire de l’intégration.

Aperçu du mot de passe une fois sécurisé avec les expressions régulières (Regex) :

La barre de progression n’est pas prise en compte dans le tutoriel mais il suffit simplement de lui attribuer un pourcentage de réussite sur 100%.

Création du champ de saisie de mot de passe :

Simple champ de saisie de type password, il faut lui ajouter un id pour le récupérer facilement en javascript.

<input type="password" id="mot_de_passe" name="motdepasse">

Création de la liste pour les expressions requises dans le mot de passe :

Une liste avec autant de li que vous souhaitez vérifier avec chacun un id pour les retrouver.

<ul>
	<li id="taille-mdp"></li>
	<li id="min-mdp"></li>
	<li id="maj-mdp"></li>
	<li id="chiffre-mdp"></li>
</ul>

Vérification lors de la saisie du mot de passe :

Voici le code nécessaire pour vérifier le mot de passe, je vais tout détailler.

A chaque fois que la touche est “levée” sur l’input du mot de passe nous faisons la vérification.

$("#mot_de_passe").on("keyup", function () {
    //Si la valeur n'est pas vide
    if ($(this).val() != "") {
        let taille = $("#taille-mdp");
        taille.children().remove();
        taille.text("");
        let min = $("#min-mdp");
        min.children().remove();
        min.text("");
        let maj = $("#maj-mdp");
        maj.children().remove();
        maj.text("");
        let digit = $("#chiffre-mdp");
        digit.children().remove();
        digit.text("");
        //Vérifie qu'il y a au moins 8 caractères
        if (/^(.{8,})/.test($(this).val())) {
            taille.append('<i class="fas fa-check-circle is-font-primary"></i> Au moins 8 caractères. (' + $(this).val().length + '/8)');
        } else {
            taille.append('<i class="fas fa-times-circle is-font-danger"></i> Au moins 8 caractères. (' + $(this).val().length + '/8)');
        }
        //Vérification du chiffre
        if (/^(?=.*\d)/.test($(this).val())) {
            digit.append('<i class="fas fa-check-circle is-font-primary"></i> Au moins 1 chiffre.');
        } else {
            digit.append('<i class="fas fa-times-circle is-font-danger"></i> Au moins 1 chiffre.');
        }
        //Vérification de la minuscule
        if (/^(?=.*[a-z])/.test($(this).val())) {
            min.append('<i class="fas fa-check-circle is-font-primary"></i> Au moins 1 caractère en minuscule.');
        } else {
            min.append('<i class="fas fa-times-circle is-font-danger"></i> Au moins 1 caractère en minuscule.');
        }
        //Vérification de la majuscule
        if (/^(?=.*[A-Z])/.test($(this).val())) {
            maj.append('<i class="fas fa-check-circle is-font-primary"></i> Au moins 1 caractère en majuscule.');
        } else {
            maj.append('<i class="fas fa-times-circle is-font-danger"></i> Au moins 1 caractère en majuscule.');
        }
    } 
});

Vérification de la taille du mot de passe :

Nous vérifions grâce à l’expression régulière /^(.{8,})/ que le mot de passe fait au minimum 8 caractères. Détails de la méthode test sur un pattern

Si nous voulions au maximum 20 caractères nous aurions du mettre ce pattern : /^(.{,20})/.

L’ajout des balise “i” permet d’ajouter des logos pour indiquer si c’est valide ou non.

if (/^(.{8,})/.test($(this).val())) {
     taille.append('<i class="fas fa-check-circle is-font-primary"></i> Au moins 8 caractères. (' + $(this).val().length + '/8)');
} else {
     taille.append('<i class="fas fa-times-circle is-font-danger"></i> Au moins 8 caractères. (' + $(this).val().length + '/8)');
}

Vérification de la présence d’un chiffre dans le mot de passe :

Le pattern /^(?=.*\d)/ permet de vérifier qu’il y a bien un chiffre.

if (/^(?=.*\d)/.test($(this).val())) {
   digit.append('<i class="fas fa-check-circle is-font-primary"></i> Au moins 1 chiffre.');
} else {
   digit.append('<i class="fas fa-times-circle is-font-danger"></i> Au moins 1 chiffre.');
}

Vérification des minuscules et majuscules :

Le pattern /^(?=.*[a-z])/ vérifie qu’il y a bien une lettre minuscule et vous l’aurez deviné le pattern /^(?=.*[A-Z])/ vérifie les majuscules.

if (/^(?=.*[a-z])/.test($(this).val())) {
   min.append('<i class="fas fa-check-circle is-font-primary"></i> Au moins 1 caractère en minuscule.');
} else {
   min.append('<i class="fas fa-times-circle is-font-danger"></i> Au moins 1 caractère en minuscule.');
}

if (/^(?=.*[A-Z])/.test($(this).val())) {
   maj.append('<i class="fas fa-check-circle is-font-primary"></i> Au moins 1 caractère en majuscule.');
} else {
   maj.append('<i class="fas fa-times-circle is-font-danger"></i> Au moins 1 caractère en majuscule.');
}

Conclusion :

Vous avez désormais une indication de saisie pour votre utilisateur, il reste maintenant à bloquer la soumission du formulaire lorsque celui-ci a mal rempli son mot de passe.

Les expressions régulières (Regex) sont assez puissantes, voici un lien pour les tester : Apprendre et tester les expressions régulières