昨日に引き続きAjax勉強中に関する記事になります。とりあえず昨日作ってみたJavascriptによる
パスワード確認欄のチェック機能です。いろいろなサービスの新規登録時に
パスワード、パスワード（確認用）の2回パスワードを入力することが多いのですが、この入力した
２つのパスワードが一致するかどうかをリアルタイムで確認する機能になります。今まではこの機能を
実装すべきときは、PHPを使ってサーバー側で処理をしていたのですが、これだと一度入力した全データを
サーバー側に送らなければいけないのでユーザとしては不便です。それをクライアントPC上で完結させるために
Javascriptの出番となるわけです。
スクリプト(register.js)
- /* ***************************************
- * パスワードチェックを行うスクリプト。
- * <input type=”password” id=”passwd” />
- * と
- * <input type=”password” id=”passwd_conf” />
- * の入力ボックス内に変化があったときに関数passwd_checkが
- * 発動し、２つのパスワードが一致しなかった場合には、
- * id=resultの要素にその旨のメッセージを出力する。
- * *************************************** */
- function passwd_check() {
- // パスワード入力ボックス内の文字を取得する。
- var passwd = $F(“passwd”);
- var passwd_conf = $F(“passwd_conf”);
- // パスワード入力ボックス内の文字を比較する。
- if( passwd != passwd_conf ) {
- $(‘result’).innerHTML = ”パスワードが一致しません。”;
- } else {
- $(‘result’).innerHTML = ”";
- }
- }
- window.onload = function() {
- // inputタグ（パスワード用）に変更があればパスワードチェックを行う。
- new Form.Element.Observer(
- ’passwd’,
- 1,
- function (element,value){passwd_check();}
- );
- new Form.Element.Observer(
- ’passwd_conf’,
- 1,
- function (element,value) {passwd_check();}
- );
- }
HTML(register.html)
- <!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>sample</title>
- <script src=”./js/prototype.js” type=”text/javascript”></script>
- <script src=”./js/register.js” type=”text/javascript”></script>
- <script type=”text/javascript”>
- </script>
- </head>
- <body>
- <form method=”post” action=”./register.html” id=”register”>
- <table>
- <tr>
- <td>パスワード</td>
- <td><input type=”password” id=”passwd” /></td>
- </tr>
- <tr>
- <td>パスワード（確認用）</td>
- <td><input type=”password” id=”passwd_conf” /></td>
- <td id=”result” style=”color: red;”></td>
- </tr>
- </table>
- <input type=”submit” value=”送信” />
- </form>
- </body>
- </html>
解説？
スクリプトのほうは、最初の部分のコメントの通りで、
<input type=”password” id=”passwd” />
と
<input type=”password” id=”passwd_conf” />
の入力ボックス内に変化があったときに関数passwd_checkが
発動し、２つのパスワードが一致しなかった場合には、
id=resultの要素にその旨のメッセージを出力します。
また、入力ボックス内に変化があったかどうかは1秒ごとにチェックしています。これを変更するには、
new Form.Element.Observer(‘passwd’, 1,function (element,value){passwd_check();});
の部分の第2引数が1となっているところ（青字の部分）の数字を変更すればOKです。
あとは、HTMLのほうで、formタグのidをregisterにし、二つのパスワード入力ボックスの
idをそれぞれ、passwd, passwd_confにする必要があります。
最後に、これら２つのファイルを同じ階層に置くようにしましょう。（もし、違う階層に置く必要がある場合にはregister.htmlの
scriptタグでregister.jsを指定している場所を変更してください。
おそらく、これくらいでOKのはずです。
感想
思っていたよりも簡単にできた。まぁ、ロジックが単純だからだとは思うけど。
あと追加すべきとしては、今は入力時にしかチェックしてないけど、これを送信時にもチェックすべきですね。
送信時にクライアントPC上でチェックして、もし２つのパスワードが異なっていればサーバに送信する前に
クライアントPC上でエラー出力するようにするのが一番ですね。
サンプルページ
