JavaScript と jQueryで作るフォームバリデーション

正規表現を使ったメールアドレスの書式チェック

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
正規表現を使って、入力されたメールアドレスの書式に誤りがないかどうかを調べる方法について解説致します。
講師:
07:54

字幕

このレッスンでは JavaScript と jQuery を使って フォームバリデーションを実装するにあたり ユーザーによって入力された― メールアドレスの書式に 誤りがないかどうかを 正規表現を使ってチェックする 方法について解説いたします まずは ダウンロードしてきた こちらのフォルダの中に入っている これら3つのファイルを エディタで開いて下さい そして これがそれらのファイルを 開いた状態です これらのファイルを使って 今回の レッスンの解説を進めていきたいと思います それでは早速レッスンを始めていきましょう 今回 メールアドレスの書式を調べるために 利用する この正規表現というものですが 正規表現とは 文字列を 検索するための手法で かなり複雑な条件を指定して それに一致する文字列を 検索させることができる手法 となっています 今回は JavaScript と この正規表現を使って メールアドレスの書式を チェックしてみたいと思います それでは javascript.js を開いて下さい そして 今 このファイルは このような形になっていますね これまでのレッスンで 入力必須項目のチェックを こちらの部分でやってきましたが 今回のメールアドレスの書式のチェックは この下に書いていきたいと思います まずはフォームの中の メールアドレスの入力欄に入力された内容を 変数に格納する所から始めます まずは var そして 変数の名前を email とします そして まずは $() の この () の中に メールアドレスの入力欄を指し示す セレクタを書きます ここでは input そして () の この中に name 属性で email と書きます そして この後に val と書いて (); そして入力必須項目のチェックの時にも使った trim を使ってあげましょう ここに $.trim と書いて ( を書きます そして この部分を ) で囲ってあげます このようにすることで name="email" という属性を持った input タグの中に入力されたメールアドレスの 前後の無駄なスペースを 取り除いた状態の形で こちらの email という変数に 格納することができます それでは次に このメールアドレスが格納された この変数 email の中に入力されている メールアドレスが 本当にメールアドレスの書式に従っているのか どうかをチェックする方法について 正規表現を使って 書いてみたいと思います まずは変数を作ります var そして ここでは is_email といった名前の変数にしておきます そして = そしてこちらの email の変数ですね email の変数を書いて . その後に match と書きます そして ( ); そしてこの中に その正規表現というものを書いていきます 今回は最もシンプルな形で メールアドレスの書式をチェックする 正規表現を書いてみたいと思います まずは このように書きます そして この中に このように書いていきます そして @ ( . + ) そして \ . そして ( . + ) そして 最後に $ です 今 書いたこの部分が正規表現となります ではこの正規表現 どういった意味を 表しているのかを見ていきたいと思います まず こちらの記号ですが これは文の先頭であるということを意味します 何が先頭なのかというと この部分が先頭にある ということになります この . は 改行以外の任意の文字を 表していて そして この + は その改行以外の任意の文字が 一度以上続くという意味になります そして @ は email アドレスの中にある @ ですね そして その後に また同じものが出てきました これも同様に改行以外の任意の文字が 一文字ずつ続くといった内容を表しています そして \ と . ですが email アドレスの中には .com や .jp といった書式が最後にありますね その部分の . を表していますが 普通に . を書いてしまうと 先程の こちらの . 改行以外の任意の文字という 意味になってしまうので それを防ぐために こちらの \ これをエスケープ文字と言いますが これを付けることによって 通常の . の文字として認識させています そして最後に もう1度 またでてきますね . + と書いて 改行以外の文字が 1文字以上続く そして最後の $ は この部分ですね この部分が文末に来るよ という意味になります 途中にでてくる こちらの ( ) ですが これは この中に入っている . + の部分をグループ化しています 今回は利用しませんが このように ( ) で囲ってグループ化することによって 対象文字列を検索して この部分に該当する文字列ですね その文字列だけを抜き出してくる といったことが可能になります 参考程度に覚えておきましょう それでは この1文で どのような意味を表しているかというと まず こちらの email アドレスの書式を 表す正規表現に ユーザーが入力した email アドレスの 書式が一致していれば こちらに 一致した文字列が そのまま格納されてきます もし この形式に一致しなければ こちらの変数には ヌルといった空っぽのデータが 格納されます 要するに この is="email"という変数の中が空っぽか もしくは この条件に一致した email アドレスが入っているかどうか それを判別して エラー処理に繋げていく といった形になります その結果に応じた条件分岐の方法については 後のレッスンでご紹介していきます 以上でレッスンは終了です 今回はフォームバリデーションを 実装するにあたり メールアドレスの書式を正規表現を使って 書式に誤りがないかどうかを チェックする方法について 解説いたしました 以降のレッスンでは フォームの中で入力された電話番号の書式が 合っているかどうかを 同じく正規表現を使って 判別する方法について解説いたしますので そちらもあわせてご覧下さい

JavaScript と jQueryで作るフォームバリデーション

このコースではJavaScriptとjQueryを使ってユーザー登録フォームなどでユーザーが入力忘れや誤記入した場合にユーザーに通知するフォームバリデーション機能を実装する方法を学習します。JavaScriptとjQueryの説明からHTMLやCSSコーディングの仕方、入力必須項目のチェック方法についても紹介します。

1時間45分 (18 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年11月04日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。