Exemple de fonction de vérification de la force du mot de passe implémentée par JS sur la base des compétences d'expressions régulières

Exemple de fonction de vérification de la force du mot de passe implémentée par JS sur la base des compétences d'expressions régulières_javascript

韦小宝

Libérer： 2018-01-15 11:22:32

original

1697 Les gens l'ont consulté

Cet article présente principalement la fonction de vérification de la force du mot de passe implémentée par JS basée sur des expressions régulières, impliquant une réponse événement javascript et une traversée de caractères basée sur des règles régulières, un jugement et d'autres compétences opérationnelles connexes. Les amis intéressés par JavaScript peuvent se référer à cet article

Cet article décrit la fonction de vérification de la force du mot de passe implémentée par JS sur la base d'expressions régulières. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Le code spécifique est le suivant :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.php.cn  脚本之家</title>
</head>
<style type="text/css">
  body {
    background: #ccc;
  }
  label {
    width: 40px;
    display: inline-block;
  }
  span {
    color: red;
  }
  .container {
    margin: 100px auto;
    width: 400px;
    padding: 50px;
    line-height: 40px;
    border: 1px solid #999;
    background: #efefef;
  }
  span {
    margin-left: 30px;
    font-size: 12px;
  }
  .wrong {
    color: red
  }
  .right {
    color: green;
  }
  .strengthLv0 {
    height: 6px;
    width: 120px;
    border: 1px solid #ccc;
    padding: 2px;
  }
  .strengthLv1 {
    background: red;
    height: 6px;
    width: 40px;
    border: 1px solid #ccc;
    padding: 2px;
  }
  .strengthLv2 {
    background: orange;
    height: 6px;
    width: 80px;
    border: 1px solid #ccc;
    padding: 2px;
  }
  .strengthLv3 {
    background: green;
    height: 6px;
    width: 120px;
    border: 1px solid #ccc;
    padding: 2px;
  }
</style>
<body>
<p class="container">
  <label>密码</label>
  <input type="text" id="inp1" maxlength="16">
  <!--<input type="password" id="inp1" maxlength="16"/>-->
  <p class="pass-wrap">
    <em>密码强度：</em>
    <em id="strength"></em>
    <p id="strengthLevel" class="strengthLv0"></p>
  </p>
</p>
<script>
  var regEx = /^[1-9]\d{4,9}$/; //匹配qq号
  //找人
  var inp1 = document.getElementById("inp1");
  var strength = document.getElementById("strength");
  var strengthLevel = document.getElementById("strengthLevel");
  var arr = ["", "低", "中", "高"];
  inp1.onkeyup = function () {
    var level = 0;
    if (/[1-9]/.test(this.value)) {
      level++;
    }
    if (/[a-z]/.test(this.value)) {
      level++;
    }
    if (/[^a-z1-9]/.test(this.value)) {
      level++
    }
    if (this.value.length < 6) {
      level = 0;
    }
    strength.innerHTML = arr[level];
    strengthLevel.className = "strengthLv" + level;
  };
  /* inp1.onkeyup = function () {
   var level = 0;
   if (/[1-9]/.test(this.value)) {
   level++;
   }
   if (/[a-z]/.test(this.value)) {
   level++
   }
   if (/[^a-z0-9]/.test(this.value)) {
   level++
   }
   if (inp1.value.length < 6) {
   level = 0;
   }
   strengthLevel.className = "strengthLv"+level;
   strength.innerHTML = arr[level];
   };*/
</script>
</body>
</html>

Copier après la connexion

Ce qui précède est tout le contenu de cet article, j'espère qu'il pourra aidez tout le monde à apprendre ! !

Recommandations associées :

Explication détaillée des six types d'erreurs en JavaScript

Trois méthodes d'implémentation des fonctions définies par JavaScript

Comment générer aléatoirement un certain nombre de mots de passe en utilisant javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!