Mode d'emploi - Vérification de la complexité du mot de passe

Version imprimable

1 pièce(s) jointe(s)

Bonjour à tous,

J'aurais besoin de conseils quant à la marche à suivre afin de pouvoir indiquer à l'utilisateur (lors de son inscription) le niveau de complexité de son mot de passe.

Tout d'abord je vous indique que vous trouverez en pièce-jointe une partie du visuel de mon formulaire d'inscription. (Cela vous permettra d'avoir une idée plus précise du résultat que je souhaite obtenir)

Je songe à utiliser du javascript pour parvenir à mes fins mais le hic c'est que je débute seulement dans ce domaine donc je galère pas mal.

Je regarde actuellement le tutoriel de Paul Underwood (traduit par Sébastien Germez) mais j'avoue que j'ai du mal à mettre en application ce tutoriel.
Lien du tutoriel : http://paulund.developpez.com/tutori...xite-password/

Alors concrètement, voici le code de la partie formulaire qui nous intéresse directement :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <body> <?php include GCT_DIR_ROOT.'inscriptions/i_header.html'; ?> <section> <h1> Formulaire Inscription </h1> <form method="post" action="/share/inscriptions/i_traitement.php" enctype="multipart/form-data"> <p> <script type="text/javascript" src="/share/javascript/js_password.js"></script> <fieldset> <legend> Vos Identifiants ? </legend> <p>Tous les champs précédés d un astérisque sont obligatoires.</p> <label for="identifiant">* Identifiant :</label> <input id="identifiant" name="id" type="text" maxlength="12" placeholder="Ex : LeGrandCharles" autofocus required/> <label for="motdepasse">* Mot de passe :</label> <input id="motdepasse" name="mdp" type="password" maxlength="20" required/> <div id="force_mdp"> Force de votre mot de passe : </div> <label for="conf_mdp">* Confirmation du Mot de passe :</label> <input id="conf_mdp" name="conf_mdp" type="password" maxlength="20" required/> </fieldset>
J'ai créé un fichier javascript "js_password.js" dans lequel se trouvera donc l'implémentation de l'indicateur de complexité (pour le moment ce fichier est vide :cry:)

Pour l'instant je souhaite juste faire un truc de base qui indique à côté du <div> force_mdp et à mesure que l'utilisateur entre son mot de passe les indications suivantes : faible, moyen ou fort.

Je vais continuer à étudier le tutoriel de Paul pour pouvoir l'adapter à mon cas mais si vous avez des idées pour m'aider un peu je suis preneur.

C'est même d'ailleurs le but de cette discussion :)

Merci d'avance pour vos réponses

Bonjour,

Si tu adaptes légèrement le script du tutoriel aux identifiants de tes balises, cela peut donner le code suivant JS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 $(document).ready(function () {
     $('#motdepasse').keyup(function (e) {
         if ($('#motdepasse').val() != '' && $('#conf_mdp').val() != '' && $('#motdepasse').val() != $('#conf_mdp').val()) {
             $('#force_mdp').html('Mots de passe différents !');
 
             return false;
         }
 
         // Must have capital letter, numbers and lowercase letters
         var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
 
         // Must have either capitals and lowercase letters or lowercase and numbers
         var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
 
         // Must be at least 6 characters long
         var okRegex = new RegExp("(?=.{6,}).*", "g");
 
         if (okRegex.test($(this).val()) === false) {
             // If ok regex doesn't match the password
             $('#force_mdp').html('Le mot de passe doit contenir au moins 6 caractères.');
 
         } else if (strongRegex.test($(this).val())) {
             // If reg ex matches strong password
             $('#force_mdp').html('Fort');
         } else if (mediumRegex.test($(this).val())) {
             // If medium password matches the reg ex
             $('#force_mdp').html('Moyen');
         } else {
             // If password is ok
             $('#force_mdp').html('Faible');
         }
 
         return true;
     });
 });

http://jsfiddle.net/Yahiko/w9CMa/9/

Et pour que le code fonctionne, il convient d'ajouter la référence à jQuery dans ton fichier HTML (par exemple dans la section <HEAD>).

Code:

<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>

17/08/2013, 17h01
Zanarkand

Cela fonctionne parfaitement, merci.

Cependant je ne comprends pas dans quelle ordre et/ou de quelle manière s'effectue les traitements au sein de la page. Pourrais-tu éclairer quelque peu ma lanterne ?
17/08/2013, 17h23
yahiko

Voici le déroulement simplifié du traitement

1. Le document HTML s'affiche avec toutes les balises. Le navigateur déclenche l'événement "ready" associé à l'objet "document" ce qui appelle la fonction jQuery ready() définie dans ton fichier JS.

2. L'appel à cette fonction rattache l'évènement "keyup" (mais ne le déclenche pas) à la balise input correspondant à la saisie du mot de passe. Ceci est réalisé par la fonction jQuery keyup().

3. L'utilisateur peut saisir des caractères dans la zone du mot de passe. Ceci déclenche l'événement "keyup" préalablement rattaché à la balise input. Le corps de la fonction anonyme définie en paramètre s'exécute à ce moment là.
18/08/2013, 09h50
Zanarkand

D'accord je comprends mieux.

Merci à toi pour tous ces précieux renseignements. ;)