最近、パスプロジェクトに取り組んでいますが、登録モジュールにパスワードを入力するときに、パスワードの強度（低、中、高）を表示する必要があります。今日はその結果を共有します。このコードはオンライン検索ほど複雑ではなく、一般的なニーズを満たすことができます。
HTML コードは次のとおりです:
< !DOCTYPE HTML>
;パスワードの強度< ;/title>
パスワードの強度:
js コードは次のとおりです:
コードをコピーします
document.getElementById(passwordID).onkeyup = function(){
_this.checkStrength( this.value);
}
};
PasswordStrength.prototype.init = function(strengthID){
var id = document.getElementById(strengthID);
var div = document.createElement ('div');
varstrong = document.createElement('strong');
this.oStrength = id.appendChild(div);
this.oStrengthTxt = id.parentNode.appendChild(strong) ;
};
PasswordStrength.prototype.checkStrength = function (val){
var aLvTxt = ['','low','medium','high']; ;
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 if(lv > 3) {lv=3; }
this.oStrength.className = 'strengthLv' lv;
レンダリング:
使用説明:
1. オブジェクトの最初のパラメータはパスワード入力ボックスの ID で、2 番目のパラメータはパスワード強度バーの ID です。 。
2. パスワードの強度ルールは checkStrength メソッドでカスタマイズできます。
3. パスワードの強度は、3 つの CSS スタイル (strengthLv1、strengthLv2、strengthLv3) に対応して、低、中、高を表示します。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
