JavaScriptでフォームを自由に操る

入力データのチェック（空白チェック）

まず、名前とメールアドレスを入力するフォームを作ります(リスト1）。イベントハンドラとしては、「onblur」を使用することにします。

「onblur」は、入力が終わって、フォーカスが外れた時、すなわち、次の入力などに移った時を感知してJavaScriptを呼び出します。よって、入力が終了したタイミングを感知することができます。

さらに、エラーメッセージを書く領域を設定しています。id属性が「errName」になっているところは、名前の入力チェックの時にエラーメッセージを表示する領域、id属性が「errMail」のところは、メールアドレスの入力チェック時にエラーメッセージを表示する領域になっています。

リスト2のJavaScriptでは、checkName()関数で、名前のチェック、checkMail()でメールアドレスのチェックをしていますが、この段階では、空欄（何も入っていない）かどうかのチェックをしてデータが入ってない場合に、エラーメッセージを赤文字で出力する処理をしています。innerHTMLプロパティを使ったHTMLへの書き出し方法は、第1回を参考にしてください。

ここまでの内容は、index9.htmlで動作確認することができます。

入力データのチェック（正規表現によるチェック）

先ほど、正規表現について学びましたので、早速使ってみましょう。

正規表現で、厳密にメールアドレスをチェックすると、非常に難解な正規表現になってしまうということと、正規表現で完全にメールアドレスをチェックすることはできないので、ここでは、練習用の簡易的な正規表現でメールアドレスをチェックしていきます。

正規表現を使って、文字列をチェックする時は、match()というメソッドを使って、「調べたい文字列.match(/正規表現/)」の書式で記述します。

リスト3では、str_mail.match()をif文の中に入れて判定させています。match()というメソッドは、正規表現にマッチしていれば、配列を返し、そうでない場合（正規表現と一致しない場合）は、nullを返します。nullは、値が存在しないという意味になり、これは、false(偽)と判定されます。

よって、メールアドレスの正規表現を使って、値が正規表現と一致しない場合は、エラーメッセージを画面に出すようにinnerHTMLを使って書き出します（リスト3）。また、index10.htmlで確認することができます。

正規表現の使用法についての詳細は、正規表現をJavaScriptで使う方法を参考にしてください。