ホームページ > 記事 > ウェブフロントエンド > 単純なパスワード強度 plugin_html/css_WEB-ITnose
単純なパスワード強度 plugin_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 08:53:231198ブラウズ
以前行ったパス プロジェクトでは、登録モジュールに入力したパスワードにパスワードの強度 (低、中、高) を表示する必要がありました。もちろん、これは非常に単純なパスワード強度表示機能です。オンラインほど複雑ではなく、一般的なニーズを満たすことができます。
function PasswordStrength(passwordID,strengthID){ var _this = this; _this.init(strengthID); document.getElementById(passwordID).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 = ['','低','中','高']; 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];} パラメータの説明
- オブジェクトの最初のパラメータはパスワード入力ボックスの ID で、2 番目のパラメータはパスワード入力ボックスの ID です。パラメータはパスワード強度バーの ID です。
- パスワード強度ルールは checkStrength メソッドでカスタマイズできます。
- パスワード強度は 3 つの CSS スタイル (strengthLv1、筋力Lv2、筋力Lv3）。
使い方
<!DOCTYPE HTML><html lang="en"><head> <meta charset="utf-8"/> <title>密码强度</title> <style> #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 class="pass-wrap"> <em>密码强度：</em> <div id="passStrength"></div> </div></body></html><script src="js/passwordStrength.js"></script><script>window.onload = function(){ new PasswordStrength('pass','passStrength');}</script> 声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。