私は最近、パスプロジェクトに取り組んでいます。内部の登録モジュールにパスワードを入力するには、パスワード強度(低、中、高)が必要です。今日は私はあなたと仕事の結果を共有します。コードはオンラインで検索するほど複雑ではなく、一般的なニーズを満たすことができます。
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)。