使用例:簡易メールアドレスチェックEmailバリデーションを実装してみるbindメソッドremoveメソッドendメソッドafterメソッドEmailバリデーションの実装バリデーションをプラグインを使わずに実装するフォームは主にコンバージョンに直結する場合が多いと思いますので、ユーザビリティを向上させる、つまりユーザーに最後まで入力してもらえるようなフォーム作りはとても重要です。どのような機能を持って使いやすくするのか、にはそのサイト自体のターゲットユーザー層を認識した上で盛り込む必要がありますが、どんな方法で使いやすくできるのかは知っておいて損はありません。前回は、ラベル要素を利用して、直感的に分かりやすくする方法を紹介しましたが、今回・次回にかけては少し突っ込んでJavaScriptで行うバリデーション(※1)を実装してみたいと思います。[1]入力項目の正当性チェック入力された文字列をチェックする文字列チェックのパターンまずは文字列チェックのパターンをリストに挙げてみましょう。必須チェック(空文字)メールアドレス数字のみアルファベットのみ電話番号URL基本的な項目としてはこんな所でしょうか。最初の必須チェックで考えてみましょう。必須チェックは、そのフィールドは入力する必要がある、ということなので1文字でも文字列が存在するか半角スペース・全角スペース・改行・タブだけで入力されていないか以上2つの手順を踏むことで、チェックすることができます。1)1文字でも文字列が存在するか、をチェックする1.の1文字でも存在するかのチェックは、テキストフィールドのvalue属性値を監視することで、確認ができます。テキストフィールドの文字列はvalメソッドで取得します。文字列が存在するかのチェックは、文字列の長さ(文字数)で行います。取得したtxtの長さはJavaScriptのlengthプロパティに含まれていますので、以下のように取得できます。txt.length;console.log(txtLength);テキストフィールドのvalue値の長さ取得の実行結果これで文字数が取得できました。この文字列がそもそも存在してかつ長さ(文字数)が0以上の場合にスクリプトが実行するには以下のようにif文を書きます。ない場合は何もしない}2)半角スペース・全角スペース・改行・タブだけで入力されていないかのチェックこの4つのチェックには正規表現というものを使います。正規表現は文字列のパターンマッチングに使われるもので、様々なプログラミング言語で使われています。本連載ではバリデーションに必要になる触りの部分を紹介します。このチェックをするためのスクリプト部分を例にあげてみます。空白の箇所には半角スペースと全角スペースが含まれています。文字列に含まれている文字やパターンなどを判定するのが正規表現です。0-9というように書くことで1文字の数字を判定できます。\dは0~9のうちのいずれかということになります。a-zA-Z0-9_となります。\t\n\r]+@[\w\-\.]+\.[\w\-\.]+$というような正規表現で行います(※2⁠)⁠。[2]紹介しているメールアドレスチェックは最低限の形式チェックであり、RFC2822の仕様には準拠していません。詳しくは後述(※3)正規表現によるマッチング正規表現を用いたパターンマッチングを行うには、JavaScriptのmatchメソッドを使います。matchの引数に半角スラッシュで正規表現を挟んだ「正規表現リテラル」を与えることで、指定した正規表現にマッチした文字列を含んでいればtrue、いなければfalseが返されます。strings.match(/正規表現/)連載中で使用するマッチングの表現まずは連載で使用するマッチングの表現を挙げておきます。これらはメタ文字、定義済み文字クラスと呼ばれます。正規表現で使われる独特の意味を持つ文字。タブエスケープ上記のメタ文字で定義されている文字列を文字として扱いたい場合や定義済み文字クラスを使う場合は、文字をエスケープする必要があります。簡単に言うと、バックスラッシュを前に置くだけです。エスケープ文字はフォントによって、バックスラッシュ・円マークと変わりますが、入力する際はバックスラッシュを入力します。Xではoption+delete横の円マークキーでバックスラッシュの入力になります。使用例:簡易メールアドレスチェックメールアドレスとして明らかに間違っているものをチェックします。メールアドレスの形式は通常aaaa@aaaa.comのようになっています。今回は簡易チェック(※3)なので、この形式に沿っているかをチェックしたいと思います。これは先ほども少し紹介したように以下の正規表現で行います。\t\n\r]+@[\w\-]+\.[\w\-\.]+$この正規表現を文章にすると「@半角スペース全角スペースタブ改行を含まない文字列1文字以上、@1文字、半角アルファベット数字ハイフン(-)アンダースコア(_)1文字以上、半角ドット(.)1文字、半角アルファベット数字ハイフン(-)アンダースコア(_)半角ドット(.)1文字以上で始まって終わる文字列」ということになります。わかりにくいかもしれません。ひとつひとつ分けてみましょう。上記のパターンは10の文字列・メタ文字・定義済み文字クラスの組み合わせで構成されています。~で終わる[3]RFC2822(日本語訳)というメールアドレスなどのフォーマットを定めた仕様書があるのですが、今回紹介している正規表現はこのRFC2822で定義されている仕様に基づいていないため、aaaa..@aaaa.comなどの正当ではないメールアドレスの判別はできません。Emailバリデーションを実装してみるそれでは、実際にテキストフィールドにメールアドレスのチェックを追加してみましょう。その前に今回が初出のメソッドを紹介しておきます。bindメソッド第2引数で指定した関数を第1引数で指定したリスナーをトリガーに実行するように対象要素にbindします。理解しにくいかもしれませんが、blurメソッドやclickメソッドなどのイベント追加メソッドをまとめて指定できます。happened');});のようにまとめることが出来ます。複数指定する場合は、上記のように半角スペースで区切ります。removeメソッド対象の要素をjQueryオブジェクトから削除します。removeメソッド$(elm).remove();endメソッドnextメソッドやprevメソッドで行った移動をひとつ上位の要素に戻します。console.log($(this));});要素の関連性も考えて以下のようにも書けます。});afterメソッド対象の要素の後ろに要素などを追加したりできます。afterメソッド$(elm).after('<span>after</span>');Emailバリデーションの実装Emailバリデーションの仕様としては、マッチしていればテキストフィールドの後ろにvalid、していなければinvlalidと表示することにします。});});少し難しかったでしょうか。半分くらい正規表現でjQueryもあまり出てこなかったので面白くなかったかもしれません。次回は今回説明した内容をふまえてバリデーション関数を作ってみましょう。Ltd.ページ内容の全部あるいは一部を無断で利用することを禁止します⁠。個別にライセンスが設定されている記事等はそのライセンスに従います。