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

正規表現を使った「ひらがな」のチェック

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

ぜひご覧ください。

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

字幕

このレッスンでは JavaScript と jQuery を使って フォームバリデーションを実装するにあたり ユーザーによって入力された内容が 全てひらがなで入力されているかどうかを 正規表現を使って チェックする方法について解説します まずは ダウンロードしてきた こちらのフォルダ こちらのフォルダの中に入っている これら3つのファイルを エディタで開いて下さい そして これが それらのファイルを開いた状態です これらのファイルを使って 今回のレッスンの解説を 進めていきたいと思います それでは 早速レッスンを始めていきましょう 今回利用する「正規表現」とは 文字列を検索するための手法で かなり複雑な条件を指定して それに一致する文字列を 検索させることができる手法となっています それでは早速 コードの方を 見ていきたいと思います javascript.js を エディタで開いてください そして 下のほうに行きますと この部分ですね この部分に ひらがなをチェックするための 正規表現の記述が書いてあります それでは このプログラムを 順番に見ていきたいと思います まずは ユーザーに入力された値を 取得するために 変数を作っています まず var の こちらの変数の名前は furigana1 としています そして = と書いて その次 まずは こちらの部分 この部分には name="hiragana" という 属性のついた input 要素 こちらの var() は 入力された内容ということです それを取得しています そして 更にそれを $.trim( ) で囲ってあげることによって その文頭と文末に付いた余計なスペースを 削除するように命令しています その様にして 取得された内容が こちらの変数 furigana1 という所に 格納されていきます そして こちらの2行目は実際に 正規表現を書いているところになります まずは同じように変数を作っています var の ここでの変数の名前は is_hiragana としています そして = の後に 上の変数 furigana1 の部分には 先ほど取得したこちらの name="hiragana" 属性の付いた― input タグの中に入力された内容が 格納されているわけです そして .match ( そして 正規表現 の記述があって ) という形になっています そうすることによって こちらの正規表現で書かれた内容に こちらの furigana1 に 入力された内容が一致すれば その内容が こちらの is_hiragana 変数に格納されて もし一致しなければ null という 空のデータを表す値が こちらの is_hiragana 変数に 入っていきます それでは こちらの正規表現が どのようになっているかを見てみます まず こちらのマークは 文の頭を表しています そして その後に [ 小文字のひらがな「ぁ」 - (ハイフン) そして ひらがなの「ん」です そして ] と書いています ここまでで 「小文字のひらがな『ぁ』から ひらがな『ん』までの文字のいずれか」 という意味になります 要するに「ひらがなの文字のいずれか」 という意味です そして その後に すぐに + と書いてあります この様に書くことで 「この + の前にあるこちらの文字が 1つ以上存在する」 という意味になります そして 最後に こちらの $ マークは 文末を指定しています 要するに ここまででワンセットで 「ひらがなで書かれた1文字以上の文字列」 という意味の正規表現となります この様に [ ] で囲む正規表現の手法では ここに数字だけではなくて この様に 文字種の指定もすることが 可能というかたちになっています とても便利ですので 覚えておきましょう 以上でレッスンは終了です 今回は フォームバリデーションを 実装するにあたり 入力された内容が 全てひらがなで入力されているかどうかを 正規表現を使ってチェックする方法について 解説いたしました 以降のレッスンでは フォームの中で入力された内容が 全て全角カタカナで入力されているかどうかを 正規表現を使って判別する方法について 解説いたしますので そちらも合わせてご覧ください

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

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

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

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

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

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