J'ai cette invite de connexion qui permet à l'utilisateur de saisir une adresse e-mail valide, puis de saisir un mot de passe composé d'au moins un chiffre, d'un caractère spécial et d'au moins 8 caractères ou plus. Ensuite, l'utilisateur entrerait à nouveau le mot de passe et le code s'assurerait qu'il correspond. Il implémente également un compteur de force pour indiquer à l'utilisateur la force du mot de passe.

J'ai le compteur implémentant la force en fonction des caractères entrés, mais je ne peux pas comprendre comment implémenter la longueur du mot de passe. À l'heure actuelle, si l'utilisateur entre une lettre, un chiffre et un caractère spécial, il indique qu'il est fort. Mais j'en ai aussi besoin pour avoir au moins 8 caractères.

C'est la fonction spécifique qui, à mon avis, doit être ajustée;

// Function for password strength meter
  function PasswordMeter(password) {
      if (password.length === 0) {
          document.getElementById("msg").innerHTML = "";
          return;
       }
       var matchedCase = new Array();
       matchedCase.push("[$@$!%*#?&]"); // Special Charector
       matchedCase.push("[0-9]");      // Numbers
       matchedCase.push("[a-z]");     // Lowercase Alphabates

       var ctr = 0;
       for (var i = 0; i < matchedCase.length; i++) {
            if (new RegExp(matchedCase[i]).test(password)) {
                ctr++;
            }
       }

       var color = "";
       var strength = "";
       switch (ctr) {
            case 0:
            case 1:
                 strength = "Weak: Keep going...";
                 color = "red";
                 break;
            case 2:
                 strength = "Medium: A little better but add more..";
                 color = "blue";
                 break;
            case 3:
                 strength = "Strong! Now that is good!";
                 color = "green";
                 break;
       }
       document.getElementById("msg").innerHTML = strength;
       document.getElementById("msg").style.color = color;
 }

Et juste pour une meilleure perspective, voici le reste de mon code... Je suis si proche de la perfection, j'ai juste besoin d'un peu de conseils sur cette pièce, alors merci d'avance pour tout conseil/aide !

<!DOCTYPE html>
<html>
<head>

<style>

</style>

</head>
<body>

<h3>Sign In</h3>

<div class="container">
  <form action="/action_page.php">
  
    <label for="userId">UserId:</label>
    <input type="email" id="userId" name="email" pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,3}$" required>
<br>
<br>
    <label for="psw1">Password:</label>
    <input type="password" id="psw1" name="psw1" pattern="(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$%^&*_=+-]).{8,}" title="Must contain at least one number, one special character and at least 8 or more characters" onkeyup="PasswordMeter(this.value);"/><span id="msg"></span>
<br>
<br>
    <label for="psw2">Password:</label>
    <input type="password" id="psw2" name="psw2" pattern="(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$%^&*_=+-]).{8,}" title="Must contain at least one number, one special character and at least 8 or more characters" required>
    
    <input type="submit" value="Submit">
  </form>
</div>

<script>

//Function to check if email is valid.

function validateEmail(userId) {
    var re = /\S+@\S+/;
    return re.test(email);
}
userId.onchange = validateEmail;
userId.onkeyup = validateEmail;


// Function to check if both passwords is same or not. 
var password = document.getElementById("psw1"), psw2 = document.getElementById("psw2");

function validatePassword(){
  if(psw1.value != psw2.value) {
    psw2.setCustomValidity("Passwords Don't Match");
  } else {
    psw2.setCustomValidity('');
  }
}

psw1.onchange = validatePassword;
psw2.onkeyup = validatePassword;

// Function for password strength meter
  function PasswordMeter(password) {
      if (password.length === 0) {
          document.getElementById("msg").innerHTML = "";
          return;
       }
       var matchedCase = new Array();
       matchedCase.push("[$@$!%*#?&]"); // Special Charector
       matchedCase.push("[0-9]");      // Numbers
       matchedCase.push("[a-z]");     // Lowercase Alphabates

       var ctr = 0;
       for (var i = 0; i < matchedCase.length; i++) {
            if (new RegExp(matchedCase[i]).test(password)) {
                ctr++;
            }
       }

       var color = "";
       var strength = "";
       switch (ctr) {
            case 0:
            case 1:
                 strength = "Weak: Keep going...";
                 color = "red";
                 break;
            case 2:
                 strength = "Medium: A little better but add more..";
                 color = "blue";
                 break;
            case 3:
                 strength = "Strong! Now that is good!";
                 color = "green";
                 break;
       }
       document.getElementById("msg").innerHTML = strength;
       document.getElementById("msg").style.color = color;
 }
</script>

</body>
</html>
2
Moore_C 8 mars 2019 à 00:40

2 réponses

Meilleure réponse

Ainsi, votre regex vérifie déjà que la longueur du mot de passe est d'au moins 8 caractères. La seule chose que vous avez à faire est d'afficher un message si cette longueur est inférieure à 8 caractères. J'ai remplacé la variable "force" par le nouveau message, mais vous pouvez également en afficher un nouveau.

<!DOCTYPE html>
<html>
<head>

<style>

</style>

</head>
<body>

<h3>Sign In</h3>

<div class="container">
  <form action="/action_page.php">
  
    <label for="userId">UserId:</label>
    <input type="email" id="userId" name="email" pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,3}$" required>
<br>
<br>
    <label for="psw1">Password:</label>
    <input type="password" id="psw1" name="psw1" pattern="(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$%^&*_=+-]).{8,}" title="Must contain at least one number, one special character and at least 8 or more characters" onkeyup="PasswordMeter(this.value);"/><span id="msg"></span>
<br>
<br>
    <label for="psw2">Password:</label>
    <input type="password" id="psw2" name="psw2" pattern="(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$%^&*_=+-]).{8,}" title="Must contain at least one number, one special character and at least 8 or more characters" required>
    
    <input type="submit" value="Submit">
  </form>
</div>

<script>

//Function to check if email is valid.

function validateEmail(userId) {
    var re = /\S+@\S+/;
    return re.test(email);
}
userId.onchange = validateEmail;
userId.onkeyup = validateEmail;


// Function to check if both passwords is same or not. 
var password = document.getElementById("psw1"), psw2 = document.getElementById("psw2");

function validatePassword(){
  if(psw1.value != psw2.value) {
    psw2.setCustomValidity("Passwords Don't Match");
  } else {
    psw2.setCustomValidity('');
  }
}

psw1.onchange = validatePassword;
psw2.onkeyup = validatePassword;

// Function for password strength meter
  function PasswordMeter(password) {
      
      // here is the only part I modified
      if (password.length === 0) {
          document.getElementById("msg").innerHTML = "";
          return;
       } else if (password.length < 8) {
              document.getElementById("msg").style.color = 'red';
              document.getElementById("msg").innerHTML = "Your password must be at least 8 characters long";
              return;
              
       }
       
       var matchedCase = new Array();
       matchedCase.push("[$@$!%*#?&]"); // Special Charector
       matchedCase.push("[0-9]");      // Numbers
       matchedCase.push("[a-z]");     // Lowercase Alphabates

       var ctr = 0;
       for (var i = 0; i < matchedCase.length; i++) {
            if (new RegExp(matchedCase[i]).test(password)) {
                ctr++;
            }
       }

       var color = "";
       var strength = "";
       switch (ctr) {
            case 0:
            case 1:
                 strength = "Weak: Keep going...";
                 color = "red";
                 break;
            case 2:
                 strength = "Medium: A little better but add more..";
                 color = "blue";
                 break;
            case 3:
                 strength = "Strong! Now that is good!";
                 color = "green";
                 break;
       }
       
       
       document.getElementById("msg").innerHTML = strength;
       document.getElementById("msg").style.color = color;
 }
</script>

</body>
</html>
0
Quentin C 7 mars 2019 à 22:16

Je pense que ce que vous voulez, c'est utiliser différentes expressions régulières pour des mots de passe de force différente. La plupart des moteurs d'expressions régulières ont une fonctionnalité appelée "recherche". Ce sont essentiellement des affirmations. Je vais vous fournir un exemple utilisant des assertions d'anticipation.

var isEightCharactersLong = '(?=.{8,})';
var hasNumbers = '(?=.*[0-9])';
var hasLowerCase = '(?=.*[a-z])';
var hasUpperCase = '(?=.*[A-Z])';
// we're escaping the regex reserved characters using '\'
var hasSpecialCharacters = '(?=.*[!@#\$%\^&])'; 

Vous pouvez ensuite les utiliser pour créer des expressions régulières plus complexes en les combinant :

// For ES6 with template strings
// 8 characters long AND has numbers AND (has lowercase OR has uppercase)
const weakPasswordRegex = new RegExp(
  `^${isEightCharactersLong}${hasNumbers}(${hasLowerCase}|${hasUpperCase})$`);

// For lower ES versions
var weakPasswordRegex = new RegExp(
   '^' + isEightCharactersLong + hasNumbers + '(' + hasLowerCase + '|' + hasUpperCase + ')$' 

Vous pouvez également extraire la mesure de la force du mot de passe dans une fonction distincte :

function measurePasswordStrength(password) {
  var weakPassword = new RegExp('<placeholder>');
  var mediumPassword = new RegExp('<placeholder>');
  var strongPassword = new RegExp('<placeholder>');
  if (strongPassword.test(password)) return 3;
  if (mediumPassword.test(password)) return 2;
  if (weakPassword.test(password)) return 1;
  return 0;
}

Ensuite, votre PasswordMeter devient beaucoup plus lisible et compréhensible :

function PasswordMeter(password) {
  if (password.length === 0) {
    document.getElementById("msg").innerHTML = "";
    return;
  }

  var color = "";
  var strength = "";
  switch (measurePasswordStrength(password)) {
    case 0:
    case 1:
      strength = "Weak: Keep going...";
      color = "red";
      break;
    case 2:
      strength = "Medium: A little better but add more..";
      color = "blue";
      break;
    case 3:
      strength = "Strong! Now that is good!";
      color = "green"; 
      break;
  }

  document.getElementById("msg").innerHTML = strength;
  document.getElementById("msg").style.color = color;
}
0
Korbiwe 7 mars 2019 à 22:51