Googleみたいなパスワードチェッカー/ユーザー補助/SolidStateEveryday - Ajax,javascript,UIサンプルとチュートリアル -

スポンサードリンク

SAMPLE
CODE
DownLoad

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>パスワードチェック</title>
<script type="text/javascript" src="pwd_strength.js"></script> 

<style type="text/css"> 

*{padding:0; margin:0;}
body{margin:10px;font-size:12px;color:#333;}
form{
  width:666px;
  padding:100px 0 0 220px;
  height:220px;
}
input{border:1px solid #CCC; background-color:#EEE;}

p{width:200px;height:40px;}
.check{width:170px; height:50px;}

</style> 
</head>

<body>
<form> 
	<p>Password: <input type="password" id="" name="mypassword" onkeyup="runPassword(this.value, 'mypassword');" /> </p> 
	<div class="check"> 
		<div id="mypassword_text" style="font-size: 10px;"></div> 
		<div id="mypassword_bar" style="font-size: 10px; height: 10px; width: 0px; border: 10px solid white;"></div> 
	</div> 
</form>
</body>
</html>

	How to Make a Password Strength Meter Like Google \| Code and Coffee

Googleのようなパスワードチェッカーを実装できるスクリプト。
導入は簡単で、フレームワークを必要とせず単独で動作可能です。
カラーやコメントもCSSで設定しているので使いやすいかと思います。

セッティング

pwd_strength.jsのダウンロード

まずはサイトへ行きpwd_strength.jsをダウンロードしてきます。
ページ下部にpwd_strength.jsへの直リンクがあるので、それを表示したらローカルに保存します。

<head>の設定

適当な場所へpwd_strength.jsをアップしたら、適用させたいページへ読み込ませます。

パスは任意で調節してください。

HTMLのマークアップ

最後にHTML要素のマークアップです。
まずパスワードを入力するinputを設定します。

IDとNAMEは適当でOKです。
onkeyupのところに上記の様な記述をします。

次に、パスワードを入力すると出てくる「コメント」と「バー」の要素をマークアップします。

mypassword_textの箇所に「コメント」が表示され、mypassword_barの箇所に「バー」が表示されます。
「バー」の太さはheightプロパティで決定されるので各自調節してください。

pwd_strength.jsの設定

バーのカラーやコメントを変更する場合はpwd_strength.jsを調節します。
92行目当りの、

// Color and text
if (nRound > 95)
{ strText = "安全です";
strColor = "#3bce08";
}
else if (nRound > 75)
{ strText = "結構安全です";
strColor = "orange";
}
else if (nRound > 50)
{ strText = "少し安全です";
strColor = "#ffd801";
}
else
{ strColor = "red";
strText = "不安です";
}　

ここを調節することで色々変更できます。
コメントに日本語を入れる場合は、一応Unicode化しておいた方が良いでしょう。