js force du mot de passe détection en temps réel compétences code_javascript

Le jugement de la force du mot de passe est quelque chose qui doit être fait lors de l'enregistrement d'un utilisateur de site Web. Différents sites Web le mettent en œuvre de différentes manières
. Le jugement du mot de passe est en fait l'un des aspects de la vérification du formulaire. Implémentons une opération aussi simple.

Créez d'abord une simple zone de saisie du mot de passe et une barre de progression indiquant la force du mot de passe. Le tout est couvert par la boîte vali_pass. Cette boîte contient le titre, la zone du mot de passe.

<div class="vali_pass">
  <h3>简单的密码强度检测</h3>
  <input type="password" name="pass">
  <div class="vali_pass_progress">
    <span class="vali_pass_inner_progress"></span>
  </div>
</div>

Utilisons CSS pour l'embellir

.vali_pass {
  width: 350px;
  margin: 0 auto;
  padding: 10px;
  border: #eee 1px solid;
  text-align: center;
}
.vali_pass input {
  width: 96%;
  display: block;
  margin: 0;
  padding: 5px;
  font-size: 14px;
  line-height: 20px;
}
.vali_pass_progress {
  margin-top: 10px;
  background-color: #efefef;
  height: 10px;
  border-radius: 5px;
}
.vali_pass_inner_progress {
  display: block;
  height: 100%;
  background-color: transparent;
  border-radius: 5px;
  width: 100%;
}

Ce que nous devons considérer à ce stade, c'est que cette barre de progression peut avoir plusieurs états. Quel état est affiché lorsque le niveau est bas, quel état est affiché lorsque le niveau est moyen et quel état est affiché lorsque le niveau est moyen. élevé.
OK, lorsque nous l'utilisons ici, nous contrôlons la largeur et la couleur d'arrière-plan de la boîte à l'intérieur de la barre de progression. Réglez-la sur trois styles
.

.error {
 background-color: #ff3300;
}
.middle {
 background-color: gold;
}
.strong {
 background-color: green;
}

De cette façon, la structure HTML et l'embellissement CSS sont terminés. Faisons maintenant la surveillance JS.

La première chose indispensable est d'ajouter une surveillance de la saisie de texte à la zone de saisie du mot de passe

ele_pass.onkeyup = function () {...}

Le jugement de mot de passe doit être traité dans cet événement. Mais avant le traitement, nous devons initialiser certaines données, par exemple, l'expression régulière pour le jugement de mot de passe.

var regxs = [];
regxs.push(/[^a-zA-Z0-9_]/g);
regxs.push(/[a-zA-Z]/g);
regxs.push(/[0-9]/g);

J'ai utilisé trois règles régulières ici pour juger du degré de correspondance du mot de passe dans l'ordre. Une fois l'initialisation des données terminée, l'événement onkeyup est traité. Tout d'abord, la valeur de la zone de saisie est obtenue, puis sa longueur. contrôlez la longueur ici pour qu'elle soit d'au moins 6 caractères. sec Pour augmenter la sécurité, chaque fois qu'une expression dans la correspondance régulière correspond, elle est sec++, indiquant la sécurité du mot de passe. Elle est ensuite convertie en une valeur inférieure à 100. le mot de passe. Cette valeur peut être facilement utilisée pour contrôler la largeur de la barre de progression interne.

ele_pass.onkeyup = function () {
  var val = this.value;
  var len = val.length;
  var sec = 0;
  if (len >= 6) { // 至少六个字符
    for (var i = 0; i < regxs.length; i++) {
      if (val.match(regxs[i])) {
        sec++;
      }
    }
  }
  var result = (sec / regxs.length) * 100;
  ele_progress.style.width = result + "%";
}

Après avoir contrôlé la largeur de la barre de progression, nous ne pouvons pas voir l'effet de la barre de progression pour le moment. Regardez le code CSS précédent. L'arrière-plan par défaut est transparent. Nous devons ensuite contrôler différentes valeurs de sécurité et. sa couleur d'arrière-plan. Contrôle Le code suivant est utilisé pour contrôler sa couleur d'arrière-plan.

if(result > 0 && result <= 50){
  ele_progress.setAttribute("class",begin_classname + " error");
}else if (result > 50 && result < 100) {
  ele_progress.setAttribute("class",begin_classname + " middle");
} else if (result == 100) {
  ele_progress.setAttribute("class",begin_classname + " strong");
}

Dernier code JS :

var ele_pass = document.getElementsByTagName("input")[0];
var ele_progress = document.getElementsByClassName("vali_pass_inner_progress")[0];
var begin_classname = ele_progress.className;
var regxs = [];
regxs.push(/[^a-zA-Z0-9_]/g);
regxs.push(/[a-zA-Z]/g);
regxs.push(/[0-9]/g);

ele_pass.onkeyup = function () {
  var val = this.value;
  var len = val.length;
  var sec = 0;
  if (len >= 6) { // 至少六个字符
    for (var i = 0; i < regxs.length; i++) {
      if (val.match(regxs[i])) {
        sec++;
      }
    }
  }
  var result = (sec / regxs.length) * 100;
  ele_progress.style.width = result + "%";
  if(result > 0 && result <= 50){
    ele_progress.setAttribute("class",begin_classname + " error");
  }else if (result > 50 && result < 100) {
    ele_progress.setAttribute("class",begin_classname + " middle");
  } else if (result == 100) {
    ele_progress.setAttribute("class",begin_classname + " strong");
  }

}

Alors jetons un coup d'œil à nos effets :

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à tout le monde dans l'apprentissage de la programmation javascript.