Expression régulière de vérification de la force du mot de passe JS (avec code)-js tutoriel-php.cn

Expression régulière de vérification de la force du mot de passe JS (avec code)

php中世界最好的语言

Libérer： 2018-03-29 18:00:13

original

2981 Les gens l'ont consulté

Cette fois, je vous apporte la vérification de la force du mot de passe JS expression régulière (avec code). Quelles sont les précautions à prendre pour utiliser l'expression régulière de vérification de la force du mot de passe JS ? cas pratique, jetons un coup d'oeil.

J'ai travaillé sur un projet de pass récemment. Lors de la saisie d'un mot de passe dans le module d'inscription, la force du mot de passe (faible, moyenne, élevée) doit être affichée. Aujourd'hui, je vais partager avec vous les résultats. Le code n'est pas aussi compliqué que la recherche en ligne et peut répondre à des besoins généraux.

le code html est le suivant :

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <title>密码强度</title>
  <style type="text/css">
  #passStrength{height:6px;width:120px;border:1px solid #ccc;padding:2px;}
  .strengthLv1{background:red;height:6px;width:40px;}
  .strengthLv2{background:orange;height:6px;width:80px;}
  .strengthLv3{background:green;height:6px;width:120px;}
  </style>
</head>
<body>
  <input type="password" name="pass" id="pass" maxlength="16"/>
  <p class="pass-wrap">
    <em>密码强度：</em>
    <p id="passStrength"></p>
  </p>
</body>
</html>
<script type="text/javascript" src="js/passwordStrength.js"></script>
<script type="text/javascript">
new PasswordStrength('pass','passStrength');
</script>

Copier après la connexion

le code js est le suivant :

function PasswordStrength(passwordID,strengthID){
  this.init(strengthID);
  var _this = this;
  document.getElementById(passwordID).onkeyup = function(){
    _this.checkStrength(this.value);
  }
};
PasswordStrength.prototype.init = function(strengthID){
  var id = document.getElementById(strengthID);
  var p = document.createElement('p');
  var strong = document.createElement('strong');
  this.oStrength = id.appendChild(p);
  this.oStrengthTxt = id.parentNode.appendChild(strong);
};
PasswordStrength.prototype.checkStrength = function (val){
  var aLvTxt = ['','低','中','高'];
  var lv = 0;
  if(val.match(/[a-z]/g)){lv++;}
  if(val.match(/[0-9]/g)){lv++;}
  if(val.match(/(.[^a-z0-9])/g)){lv++;}
  if(val.length < 6){lv=0;}
  if(lv > 3){lv=3;}
  this.oStrength.className = 'strengthLv' + lv;
  this.oStrengthTxt.innerHTML = aLvTxt[lv];
};

Copier après la connexion

Rendu :

Mode d'emploi :

1. Le premier paramètre de l'objet est l'identifiant de la zone de saisie du mot de passe, et le deuxième paramètre est l'identifiant de la barre de force du mot de passe.

2. Les règles de force du mot de passe peuvent être personnalisées dans la méthode checkStrength.

3. La force du mot de passe affiche faible, moyenne et élevée correspondant à 3 styles CSS (forceLv1, forceLv2, forceLv3).

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment faire correspondre des nombres consécutifs avec des expressions régulières

Expérience de développement de la mise en œuvre d'une correspondance minimale avec des expressions régulières

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!