Maison > Article > interface Web > Expression régulière de vérification de la force du mot de passe JS (avec code)

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

php中世界最好的语言original: 2018-03-29 18:00:132959parcourir

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>

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];
};

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!

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：La vérification régulière dans JQ ne peut pas contenir de méthodes chinoisesArticle suivant：La vérification régulière dans JQ ne peut pas contenir de méthodes chinoises

Articles Liés

Voir plus