Maison >interface Web >js tutoriel >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

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

韦小宝original: 2018-01-15 11:22:321734parcourir

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>

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Méthode JS pour résoudre la position : problème de compatibilité persistantArticle suivant：Méthode JS pour résoudre la position : problème de compatibilité persistant

Articles Liés

Voir plus