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

正規表現を使った「全角カタカナ」のチェック

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

ぜひご覧ください。

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

字幕

このレッスンでは JavaScript と jQuery を使って フォームバリデーションを実装するにあたり ユーザーによって入力された内容が すべて全角カタカナで 入力されているかどうかを 正規表現を使ってチェックする方法について 解説いたします まずはダウンロードしてきた こちらのフォルダの中にある― これらの3つのファイルを エディッターで開いてください そしてこれがそれらのファイルを 開いた状態です これらのファイルを使って今回のレッスンの 解説を進めていきたいと思います それでは早速レッスンを始めていきましょう 今回利用する正規表現とは 文字列を検索するための手法で かなり複雑な条件を指定して それに一致する文字列を検索させることが できる手法となっています それでは早速コードの方を 見ていきたいと思います こちらの JavaScript.js これをエディッターで開いてください そして下の方を見ていきますと こちらの部分 この部分にカタカナをチェックするための 正規表現の記述が書いてあります それでは順番にプログラムを 確認していってみたいと思います まずはこちらの1行目です こちらはユーザーによって フォームに入力された値を 取得する処理が書かれています では先頭から順番に見ていきます まずは変数の定義をしています var そして変数の名前を furigana2 としています そしてその後に = と書いて その後に― 入力された内容を 取得するプログラムを書いています まずはこの部分 この部分は name katakana という属性のついたインプット要素 こちらに入力された内容を こちらの val という命令を使って 取得しています そしてさらにそれをこちらの $.trim { } で挟んであげることによって 取得した内容の頭と末尾についた 無駄な空白があれば 取り除くという命令をして データをきれいにしています そのように取得したデータを こちらの変数 furigana2 に格納しています そしてこちらの2行目は 実際に取得した値を正規表現で チェックするプログラムを書いています まずは同様に変数の定義 var と書いて 今回 変数の名前を is_katakana としています そして = と書いて furigana2 そして .match と書いています そして { } と書いて この括弧の中には 全角カタカナをチェックするための 正規表現が書いてあります この正規表現部分と こちらの変数 furigana2 に 格納された値を比較して それがきちんとした全角カタカナなのか どうなのかを判別していきます もしこちらに書かれた正規表現の値と こちらの furigana2 の値が 正規表現で一致すれば こちらの is_katakana という変数には その値が格納されていって そして もしこれが一致しなければ こちらの is_katakana という変数には 空のデータを表す null が格納されていきます ここで取得した is_katakana の 変数の中に入っている値が null なのか null ではないのかというところで 正確に入力されているか されていないのかをチェックしていきます それではこちらの正規表現の中身を 見てみたいと思います まずはこちらのマーク こちらのマークは「文頭」を表します そして何が文頭に来るのかというと こちらの “ [ " カタカナ小文字の “ァ” “ - " のカタカナの “ ン ” そして “ ] ” となっています これが全角カタカナの文字のいずれか という指定を表しています そしてそのすぐ後にこのプラスマーク このプラスマークは このプラスマークの直前にある文字が 1文字以上続くという指定をしています そしてこちらの $ マーク これは「文末」を表します よってここからここまでの正規表現で 全角カタカナ文字が1文字以上続く文字 ということを表しています この正規表現部分と この変数 furigana2 に格納された値を こちらの match という命令を使って 比較するわけですね 以上でレッスンは終了です 今回はフォームバリデーションを 実装するにあたり 入力された内容が全て全角カタカナで 入力されているかどうかを 正規表現を使ってチェックする方法について 解説いたしました 以降のレッスンではフォームの中で 入力された内容が 全て半角数字で入力されているかどうかを 正規表現を使って判別する方法について 解説いたしますので そちらも合わせてご覧下さい

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

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

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

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

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

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