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

正規表現を使った電話番号の書式チェック

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
正規表現を使って、入力された電話番号の書式に誤りがないかどうかを調べる方法について解説致します。
講師:
06:35

字幕

このレッスンでは JavaScript と jQuery を使って フォームバリデーションを実装するにあたり ユーザーによって入力された 電話番号の書式に誤りがないかどうかを 正規表現を使って チェックする方法について解説いしたします まずはダウンロードしてきた こちらのフォルダの中にある これら3つのファイルを エディタで開いて下さい そしてこれが それらのファイルを開いた状態です これらのファイルを使って 今回の レッスンの解説を進めていきたいと思います それでは早速レッスンを始めていきましょう 今回利用する正規表現とは 文字列を検索するための手法で かなり複雑な条件を指定して それに一致する文字列を 検索させることができる手法となっています それでは早速コードのほうを 見ていきたいと思います javascript.js こちらを エディタで開いて下さい そして このようにずっと 下を見ていきますと こちらの部分ですね こちらの部分に正規表現を使って 電話番号の書式をチェックする方法 このプログラムが書かれています 電話番号の書式をチェックする場合でも 前回のレッスンでやった― メールアドレスの書式のチェック こちらの方法とほとんど同じです 違うのは正規表現の書き方のみ となっています それでは順を追って このプログラムの 中身を見ていきたいと思います まずは こちらの一行目 まずは var tel で 変数 tel というのを作成しています そして その後に まずはこちらの部分ですね まずは name="tel" という属性のついた input 要素ですね こちらの val 入力された内容を 取得しています その入力された内容を 更に この $.trim の ( ) で囲ってあげることによって 入力された内容の行の先頭 もしくは 行の一番最後の部分に 無駄な空白がないかどうか をチェックして もしあった場合は それを削除するように 命令しています そして そのように取得した入力された内容を こちらの変数 tel という所に入れています そして こちらの2行目 実際の正規表現の部分ですね こちらを見ていきます まずは同様に変数 is tel というのを作っています そして この中に tel.match ( から ) まで この部分で この ( ) の中に入っている 正規表現に 一致するかどうかを調べて その結果を is tel に入れています もし この正規表現に書かれた書式と 入力された電話番号の書式が一致すれば その一致した内容が こちらの変数 is tel に入ってきます もし 一致しないようであれば この変数 is tel には 空のデータを表す null というものが入ってきます この null か null でないかということを 基準にして 入力エラーなのか そうではないのか というのを判断していくわけですね それでは こちらの正規表現の 中身を見ていきたいと思います まずみなさんは電話番号の書式というと どのようなものを思い浮かべますでしょうか 例えば このようなものがありますね 03-1234-5678 他にも 例えば携帯電話ですと 090-1234-5678 こういったものもありますね 他にも 0123-45-6789 このようなスタイルもあるかと思います 今回は これらのスタイルに一致するような 正規表現を この中に書いています では順番にみていきます まずはこちらのマーク これは行の先頭という意味になっています 行の先頭に何があるか というと この ( ) で囲まれた部分 0 から 9 という意味ですね 要するに 0 から 9 までの 数字ということです そして この後に { } で続く この部分 これは この { } の前にある この 0 から 9 の文字が 最低2文字から 最大4文字まであるよ という意味になります そして その後に 文字としての ー そして その後に同様に こちらの部分ですね これも同じように 0 から 9 までの数字が 最低2桁から4桁まであるという形です そして同じように また 文字としての ー があって また 同じように数値の 0 から 9 までが 次は {4} これは前の数値が4桁あるよ という意味になります そして最後の こちらの $ これは その文の最後ですよ という意味になります このように正規表現を書くことで 先程書いた こういった電話番号の書式に 一致させることができるわけです 正規表現を使えば こういった桁数が固定でない場合にも 対応できるので とても便利ですね 以上でレッスンは終了です 今回は フォームバリデーションを実装するにあたり 電話番号の書式を正規表現を使って 書式に誤りがないかどうかを チェックする方法について 解説いたしました 以降のレッスンではフォームの中で 入力された内容が すべて平仮名で入力されているかどうかを 正規表現を使って 判別する方法について解説いたしますので そちらも合わせてご覧下さい

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

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

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

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

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

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