skuare.net

パスワード強度を視覚的に明示するjavascript「Password Strength」

フォームなどでパスワードを入力してもらう時に、登録情報の誕生日や電話番号をパスワードにしている人がいます。
このような簡単なパスワードでは訪問者だけでなく、サイト運営者にも危険が生じかねません。
Password Strengthでは入力したパスワードの強度を視覚的に明示してくれるjavascriptです。

使用方法
Password Strengthからpass-strength.jsを、script.aculo.usからprototype.js、effects.jsをダウンロードします。
<script src="http://yourdomain/prototype.js" type="text/javascript"></script>
<script src="http://yourdomain/effects.js" type="text/javascript"></script>
<script src="http://yourdomain/pass-strength.js" type="text/javascript"></script>
さらにCSSを以下のように記述します。
<style type="text/css">
#psContainer {
height:18px;
width:100px;
border:1px solid #000;
background-color:#DDDDDD;
}
#psStrength {
background-image:url('strength.jpg');
height:18px;
width:0px;
}
</style>
最後にパスワード入力と強度の表示を以下のようにします。
<div class="text">Password : </div>
<input type="password" id="myinput" onKeyUp="updateStrength(this.value)">
<div id="psContainer">
<div id="psStrength"></div>
</div>
パスワード強度を視覚的に明示するjavascript「Password Strength」サンプル

｜ ｜ ｜ ｜ ｜ ｜

前の記事：javascriptライブラリ「jQuery」でドロップダウン型メニューを作る
次の記事：Dockメニュー作成javascript「A Mac OS X-style Dock In JavaScript」

関連記事

• セレクトボックスを装飾するjavascript「Select Box」
• [prototype]DateChooser
• 星形投票システムを実現するjavascript「StarBox 」
• プロキシーライクなゲームを作成するjavascript「Blocks.js」
• 画像ギャラリーの定番javascript「LightBox」