vérification de la force du mot de passe js-js tutoriel-php.cn

vérification de la force du mot de passe js

高洛峰

Libérer： 2017-01-16 09:23:26

original

1305 Les gens l'ont consulté

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>
<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"/>
 <div>
 <em>密码强度：</em>
 <div id="passStrength"></div>
 </div>
</body>
</html>
<script type="text/javascript" src="js/passwordStrength.js"></script>
<script type="text/javascript">
new PasswordStrength(&#39;pass&#39;,&#39;passStrength&#39;);
</script>

Copier après la connexion

Le code js est le suivant :

Copier le code

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 div = document.createElement(&#39;div&#39;);
 var strong = document.createElement(&#39;strong&#39;);
 this.oStrength = id.appendChild(div);
 this.oStrengthTxt = id.parentNode.appendChild(strong);
};
PasswordStrength.prototype.checkStrength = function (val){
 var aLvTxt = [&#39;&#39;,&#39;低&#39;,&#39;中&#39;,&#39;高&#39;];
 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 = &#39;strengthLv&#39; + lv;
 this.oStrengthTxt.innerHTML = aLvTxt[lv];
};

Copier après la connexion

Instructions d'utilisation :

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).

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun, et j'espère également que tout le monde s'abonnera au site Web PHP chinois.

Pour plus d'articles liés aux tests de force des mots de passe js, veuillez faire attention au site Web PHP chinois !