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

正規表現を使った「半角数字」のチェック

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
正規表現を使って、入力された内容が「半角数字」かどうかを調べる方法について解説致します。
講師:
05:47

字幕

このレッスンでは JavaScript と jQuery を使って フォームバリデーションを 実装するにあたり ユーザーによって入力された内容が 全て半角数字で入力されているかどうかを 正規表現を使ってチェックする 方法について解説します まずダウンロードしてきたこちらの フォルダの中に入っている これら3つのファイルを エディターで開いて下さい これがそれらのファイルを開いた状態です これらのファイルを使って 今回のレッスンの解説を進めて行きます 早速レッスンを始めていきましょう 今回利用する正規表現とは 文字列を検索するための手法で かなり複雑な条件を指定して それに一致する文字列を検索させることが 出来る手法となっています では早速コードを見て行きましょう こちらの javascript.js を エディターで開いて下さい そして下の方を見て行きますと この部分に今回実装する正規表現での数値の チェックのプログラムが書かれています 順番にどのようにプログラムが書かれているか 確認して行きましょう まずはこちらの1行目 こちらの1行目は正規表現で 値をチェックする為に ユーザーに入力された値を 変数に格納している所です まず こちら 変数の定義ですね var と書いて今回の変数の名前を age としています そして = と書いて その後ろの部分 この部分で実際に入力された値を 取得しています そしてこの部分 この部分は name="age" という 属性をもった input タグ この中に書かれた値をこちらの val という命令を使って取得しています そうして取得した内容をこちらの― $.trim( ) で挟んであげることによって 取得した内容の頭と末尾についている無駄な スペースがあれば削除する という命令を書いて データ自体を綺麗に整えています そしてそのようにして取得した値を こちらの変数 age に格納している訳です 次は2行目を見ていきたいと思います こちらでも同様にまず var と 変数を定義して 変数の名前を is_num としています そして = と書いて こちらの部分で正規表現を使って それが数値なのかどうか確認しています まずは上記で入力された値を格納した age という変数を書いて . そして match ( そして ) と書いています そうすることによってこちらの match の 中で書かれた正規表現と こちらの age を比較する という命令を出しているわけです そしてこちらの match の ( ) の中の正規表現 こちらの部分を見ていきたいと思います まずはこちらのマーク これは文頭を表します そして何が文頭にあるのかと言うと この後の この部分 これは 0 から 9 までの数字のいずれか― というのを表しています 更にその後にあるこちらの { } で囲まれた部分 これは直前にあるこちらの値 数値ですね こちらの数値 これが最低でも1桁で 最大でも3桁である― というのを示しています 最後のこちらの $ マーク これは直前にある文字が最後にありますよ というのを意味しています 要するにここからここまでの正規表現で 0から9までの数値が 最低でも1桁 最大でも3桁の数値だよ― というのを表しています 今回入力するこちらの部分は フォーム上で見ると 年齢を入力する入力フォームとなっているので 1歳から100歳までの 位の3桁までを入力値として 許容するという形になります ここで指定した正規表現と こちらの変数 age に入った値が一致すれば こちらの変数 is_num には その値が入ってきて もし一致しなければ null という 空のデータが is_num の中に入ってきます この is_num に入っている値が null なのかそうではないのかを 判断基準として入力エラーかそうではないのか というのを区別して行く訳です 以上でレッスンは終了です 今回はフォームバリデーションを 実装するにあたり 入力された内容が全て半角数字で 入力されているかどうかを 正規表現を使ってチェックする 方法について解説しました 以降のレッスンではこれまでのレッスンで 紹介した正規表現での入力チェックにおいて その結果に応じた処理の分岐および 入力エラー時の処理の方法について 解説していきますので そちらも合わせてご覧下さい

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

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

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

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

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

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