私は最近、パスプロジェクトに取り組んでいます。内部の登録モジュールにパスワードを入力するには、パスワード強度（低、中、高）が必要です。今日は私はあなたと仕事の結果を共有します。コードはオンラインで検索するほど複雑ではなく、一般的なニーズを満たすことができます。
HTMLコードは次のとおりです。
コードコピーは次のとおりです。
<！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>
<入力型= "パスワード" 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（ 'pass'、 'passStrength'）;
</script>
JSコードは次のとおりです。
コードコピーは次のとおりです。
function passwordStrength（passwordID、strengthID）{
this.init（strengthid）;
var _this = this;
document.getElementById（passided）.onkeyup = function（）{
_this.checkstrength（this.value）;
}
};
passwordStrength.prototype.init = function（strengthId）{
var id = document.getElementById（strengthId）;
var div = document.createelement（ 'div'）;
var strong = document.createelement（ 'strong'）;
this.ostrength = id.appendChild（div）;
this.ostrengthtxt = id.parentnode.appendChild（strong）;
};
passwordStrength.prototype.checkstrength = function（val）{
var alvtxt = [''、 'low'、 'medium'、 'high'];
var lv = 0;
if（val.match（/[az]/g））{lv ++;}
if（val.match（/[0-9]/g））{lv ++;}
if（val.match（/(.」）/g）/g）{lv ++;}
if（val.length <6）{lv = 0;}
if（lv> 3）{lv = 3;}
this.ostrength.classname = 'strengthlv' + lv;
this.ostrengthtxt.innerhtml = alvtxt [lv];
};
複製画像：
使用の手順：
1.オブジェクトの最初のパラメーターは、パスワード入力ボックスのIDであり、2番目のパラメーターはパスワード強度バーのIDです。
2. CheckStrengthメソッドは、パスワード強度ルールをカスタマイズできます。
3.パスワード強度は、低、中、高の値を3つのCSSスタイルに対応します（StrengthLV1、StrengthLv2、StrengthLV3）。