jsパスワード強度チェック-jsチュートリアル-php.cn

jsパスワード強度チェック

高洛峰

リリース： 2017-01-16 09:23:26

オリジナル

1243 人が閲覧しました

最近、パスプロジェクトに取り組んでいます。登録モジュールでパスワードを入力するときに、パスワードの強度（低、中、高）を表示する必要があります。今日はその結果を共有します。このコードはオンライン検索ほど複雑ではなく、一般的なニーズを満たすことができます。

html コードは次のとおりです:

<!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>

ログイン後にコピー

js コードは次のとおりです:

コードをコピー

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

ログイン後にコピー

使用手順:

1. オブジェクトの最初のパラメーターはパスワード入力ボックスの ID で、2 番目のパラメーターはパスワード入力ボックスの ID です。はパスワード強度バー ID です。

2. パスワードの強度ルールは checkStrength メソッドでカスタマイズできます。

3. パスワードの強度は、3 つの CSS スタイル (strengthLv1、strengthLv2、strengthLv3) に対応して低、中、高を表示します。

以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。また、皆さんも PHP 中国語 Web サイトをサポートしていただければ幸いです。

js パスワード強度テストに関連するその他の記事については、PHP 中国語 Web サイトに注目してください。