JSFiddle - React, Tailwind, and code Playground

by DieuTopGun

HTML

<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>
                <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="" />
                    <br/>
                    <label for="motdepasse">* Mot de passe :</label>
                    <input id="motdepasse" name="mdp" type="password" maxlength="20" required="" />
                    <br/>
                    <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>
            </p>
        </form>
    </section>
</body>

JavaScript

$(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;
     });
 });