ホームページ > 記事 > ウェブフロントエンド > JSパスワード強度検証正規表現（コード付き）
JSパスワード強度検証正規表現（コード付き）
- php中世界最好的语言オリジナル
- 2018-03-29 18:00:132947ブラウズ
今回は JS パスワード強度検証正規表現 (コード付き) をご紹介します。 最近、パスプロジェクトに取り組んでいます。登録モジュールでパスワードを入力するときに、パスワードの強度（低、中、高）を表示する必要があります。今日はその結果を共有します。このコードはオンライン検索ほど複雑ではなく、一般的なニーズを満たすことができます。
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>
<input type="password" name="pass" id="pass" maxlength="16"/>
<p class="pass-wrap">
<em>密码强度：</em>
<p id="passStrength"></p>
</p>
</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(passwordID).onkeyup = function(){
_this.checkStrength(this.value);
}
};
PasswordStrength.prototype.init = function(strengthID){
var id = document.getElementById(strengthID);
var p = document.createElement('p');
var strong = document.createElement('strong');
this.oStrength = id.appendChild(p);
this.oStrengthTxt = id.parentNode.appendChild(strong);
};
PasswordStrength.prototype.checkStrength = function (val){
var aLvTxt = ['','低','中','高'];
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 = 'strengthLv' + lv;
this.oStrengthTxt.innerHTML = aLvTxt[lv];
};
レンダリング:
使用説明:
1. オブジェクトの最初のパラメータはパスワード入力ボックスの ID です。 2 番目のパラメータはパスワード、強度バーの ID です。
2. パスワードの強度ルールは checkStrength メソッドでカスタマイズできます。
3. パスワードの強度は、3 つの CSS スタイル (strengthLv1、strengthLv2、strengthLv3) に対応して低、中、高を表示します。
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨書籍:
正規表現を使用して連続する数値を一致させる方法正規表現を使用した最小限の一致を実装した開発経験以上がJSパスワード強度検証正規表現（コード付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。