CSSの書き方も分かるjQueryプラグイン実践活用法
連載インデックスへ
CSSの書き方も分かるjQueryプラグイン実践活用法（終）

あなたのWebを入力しやすくするjQueryプラグイン10選

葛西 秋雄
2010/6/17

【5】パスワードの入力を補助する「PassRoids」

- PR -

　会員登録などのWebフォームでは、ほとんどの場合、ユーザー名とパスワードなどを入力させます。ところが、パスワードに「名前」「誕生日」「電話番号」など容易に解読できる文字を入力する人が、結構います。

　jQueryの「PassRoids」プラグインを使用すると、ユーザーが入力したパスワードの強度をチェックして、すぐ解析されるようなパスワードを入力したとき再入力させるといったことが可能です。

図4　入力したパスワードの強度が表示された
図4　入力したパスワードの強度が表示された（画像をクリックすると、別ウィンドウで実行サンプルを表示します）

　サンプルを実行してパスワードを入力すると、パスワードの強度が表示されます。

□ ステップ1：CSSとライブラリをCDN経由で組み込む

　お好みの開発ツールまたはエディタを起動して、新規ファイルを作成したら、<head>要素に<link>要素と<script>要素を追加して、CSSとjQueryのライブラリを組み込みます。

<head>
  <link href="style.css" rel="stylesheet" type="text/css" />……【1】
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>……【2】
  <script src="jquery.passroids-ja.js" type="text/javascript"></script>……【3】
</head>
  1. Webページの基本スタイルが宣言されている
  2. jQueryのライブラリをGoogle CDN経由で取り込む
  3. PassRoidsプラグインのライブラリをダウンロードして取り込む

□ ステップ2：XHTMLで骨格を定義する

　<body>要素に<form>要素を追加したら<input>（password）要素を2個配置して、パスワードと再確認用のパスワードを入力させます。

<form>
  パスワード:<br />
  <input type="password" id="password" /><br />
  再入力:<br />
  <input type="password" id="password2" /><br /><br />
  <input type="submit" value="送信" id="mysubmit" />
</form>

□ ステップ3：プラグインを組み込む

　<head>要素に<script>要素を追加したら、次のようなコードを追加してPassRoidsプラグインを組み込むと完成です。

<script type="text/javascript">
  $(function() {
      $('form').passroids({
          main: '#password',       // メインパスワードを入力する要素のセレクタ
          verify: '#password2',    // 再入力のパスワードを入力する要素のセレクタ
          button: '#mysubmit',     // 送信ボタンのセレクタ
          minimum: 2           // パスワードの強度を指定（0〜3）
      });
  });
</script>

　ここでは、jQueryのセレクタで<form>要素を検索してpassroids()メソッドを実行します。このメソッドの引数mainには、メインパスワードを入力する要素のセレクタを指定します。

　引数verifyオプションには、再入力（確認）用のパスワードを入力する要素のセレクタを指定します。引数buttonには、送信ボタン要素のセレクタを指定します。引数minimumオプションには、パスワードの強度をレベル0〜3（0：弱い、1：普通、2：強い、3：理想）の範囲で指定します。verifyオプションを指定したときは、メインパスワードと再入力用のパスワードが不一致のときエラーメッセージを表示します。

　passroids()メソッドの引数minimumに「2」を設定したときは、パスワードが「弱い」「普通」のときは許可されません。

【6】パスワードの入力文字を1字だけ残す「dPassword」

　テキストボックスにパスワードを入力するとき、入力した文字が「●」で表示されます。「dPassword」プラグインを使用すると、iPhoneのように直前に入力した1文字だけ表示できるので、誤入力を防げます。

http://blog.decaf.de/2009/07/iphone-like-password-fields-using-jquery/

iPhone-like password fields using jQuery // DECAF° blog fur digitale kommunikation via kwout

　例えば、パスワードとして「@it」を入力したときは「●●t」のように表示されます。そして、一定の時間が経過すると最後の「t」も「●」に変わります。

図5　テキストボックスに最後の文字「t」が表示されているところ
図5　テキストボックスに最後の文字「t」が表示されているところ（画像をクリックすると、別ウィンドウで実行サンプルを表示します）

　使い方は、【5】パスワードの入力を補助する「PassRoids」とほぼ同様にします。ライブラリを設定したら、<body>要素に<form>要素を追加して、以下のような<input>（password）要素を追加します。

<input type="password" name="password" id="password" value="" />

　<head>要素に<script>要素を追加したら、次のようなコードを追加してdPasswordプラグインを組み込むと完成です。

$('input:password').dPassword();

　次ページでは、テキストエリアを使いやすくするプラグインとしてautoResize、maxlengthの使い方を説明します。

3/5

　INDEX
CSSの書き方も分かるjQueryプラグイン実践活用法（終）　
あなたのWebを入力しやすくするjQueryプラグイン10選
  Page1
【1】チェックボックスやラジオボタンを見映え良く「Checkbox」
【2】ドロップダウンの領域を節約し見映え良く「combobox」
  Page2
【3】テキストボックスにヘルプを一括表示「Form Tips」
【4】テキストボックスにヘルプ情報を個別表示「Watermark Input」
Page3
【5】パスワードの入力を補助する「PassRoids」
【6】iPhoneのようにパスワードの入力文字を1字だけ残す「dPassword」
  Page4
【7】テキストエリアをリサイズする「autoResize」
【8】テキストエリアに入力するデータを制約する「maxlength」
  Page5
【9】フォームにヘルプ情報を表示する「Advisor」
【10】フォームに入力したデータを検証する「Validation」
jQueryプラグイン、ちゃんと使いこなしてますか？

CSSの書き方も分かるjQueryプラグイン実践活用法 バックナンバー 連載インデックスへ»


「デザインハック」コーナーへ


TechTargetジャパン

リッチクライアント & 帳票 フォーラム 新着記事

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

キャリアアップ

＠IT Sepcial
→ ＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -
もっと見る

お勧め求人情報

ホワイトペーパー（TechTargetジャパン）

＠IT Sepcial
→ ＠IT Special ヘ
ソリューションFLASH