もっと便利に!jQueryでラクラクサイト制作(実践サンプル付き)

第10回 今すぐできる!ユーザビリティを向上させるフォーム操作実践(2):プラグインを使わずにバリデーションを実装

この記事を読むのに必要な時間:およそ 4 分

正規表現

文字列に含まれている文字やパターンなどを判定するのが正規表現です。例えば,数字を判定したいときは

\d
// または
0-9

というように書くことで1文字の数字を判定できます。つまり\dは0~9のうちのいずれかということになります。

またアルファベットと数字,アンダースコアをまとめて

\w
// または
a-zA-Z0-9_

となります。

パターンも判定できるので,例えばEmailアドレスを判定したいときは

^[^@  \t\n\r]+@[\w\-\.]+\.[\w\-\.]+$

というような正規表現で行います※2)⁠

※2)
紹介しているメールアドレスチェックは最低限の形式チェックであり,RFC2822の仕様には準拠していません。詳しくは後述※3

正規表現によるマッチング

正規表現を用いたパターンマッチングを行うには,JavaScriptのmatchメソッドを使います。matchの引数に半角スラッシュで正規表現を挟んだ正規表現リテラルを与えることで,指定した正規表現にマッチした文字列を含んでいればtrueいなければfalseが返されます。

strings.match(/正規表現/)

連載中で使用するマッチングの表現

まずは連載で使用するマッチングの表現を挙げておきます。これらはメタ文字,定義済み文字クラスと呼ばれます。

メタ文字

正規表現で使われる独特の意味を持つ文字。

メタ文字

メタ文字説明
[012]0,1,2のいずれか
[^012]0,1,2のいずれでもない
^012012で始まる
012$012で終わる
a?0または1文字のa
a*0文字以上のa
a+1文字以上のa
.任意の1文字
定義済み文字クラス

それ単体で数字やアルファベットをまとめて表すことができる文字・表現。

定義済み文字クラス

定義済み文字クラス説明
\dまたは 0-90-9の半角数字
a-zA-Z半角英数字
\r\n改行
ラウザによってまちまちなので両方を指定
\tタブ
エスケープ

上記のメタ文字で定義されている文字列を文字として扱いたい場合や定義済み文字クラスを使う場合は,文字をエスケープする必要があります。

簡単に言うと,バックスラッシュを前に置くだけです。

\*
\d
 
// など

エスケープ文字はフォントによって,バックスラッシュ・円マークと変わりますが,入力する際はバックスラッシュを入力します。

WindowsではBackSpace左の円マークキー,Mac OS Xではoption+delete横の円マークキーでバックスラッシュの入力になります。

使用例:簡易メールアドレスチェック

メールアドレスとして明らかに間違っているものをチェックします。

メールアドレスの形式は通常

aaaa@aaaa.com

のようになっています。今回は簡易チェック※3なので,この形式に沿っているかをチェックしたいと思います。これは先ほども少し紹介したように以下の正規表現で行います。

^[^@  \t\n\r]+@[\w\-]+\.[\w\-\.]+$

この正規表現を文章にすると

@半角スペース全角スペースタブ改行を含まない文字列1文字以上,@1文字,半角アルファベット数字ハイフン(-)アンダースコア(_)1文字以上,半角ドット(.)1文字,半角アルファベット数字ハイフン(-)アンダースコア(_)半角ドット(.)1文字以上で始まって終わる文字列

ということになります。まだ少しわかりにくいかもしれません。

ひとつひとつ分けてみましょう。上記のパターンは10の文字列・メタ文字・定義済み文字クラスの組み合わせで構成されています。

簡易Emailアドレスチェックの正規表現を分解

パターン(赤文字部分)説明
^(最後まで)~で始まる
[^@  \t\n\r]@, 半角スペース, 全角スペース, タブ, 改行 文字以外
[^@  \t\n\r]+直前の文字(@, 半角スペース, 全角スペース, タブ, 改行 文字以外)を1文字以上
@@1文字
[\w\-]半角数字, 半角アルファベット, アンダースコア, ハイフンのいずれか
[\w\-]+直前の文字(半角数字, 半角アルファベット, アンダースコア, ハイフン)を1文字以上
\.半角ドット1文字(半角ドットはメタ文字のためエスケープが必要)
[\w\-\.]+$半角数字, 半角アルファベット, 半角アンダースコア, 半角ハイフン, 半角ドットのいずれか
[\w\-\.]+$ 直前の文字(半角数字, 半角アルファベット, アンダースコア, ハイフン のいずれか)を1文字以上
(最初から)$ ~で終わる
※3)
RFC2822日本語訳というメールアドレスなどのフォーマットを定めた仕様書があるのですが,今回紹介している正規表現はこのRFC2822で定義されている仕様に基づいていないため,aaaa..@aaaa.comなどの正当ではないメールアドレスの判別はできません。

著者プロフィール

長谷川広武(はせがわひろむ;h2ham)

1984年生まれ。出版会社勤務でWeb製作・運用更新の経験を経て,2009年より株式会社24-7に入社。Webサイトの運用更新業務を中心に制作業務を行う。各種CMSのカスタマイズやjQueryを利用したUI設計などを得意とする。ブログではjQueryや日々の思いなど書いたり,自作のjQueryプラグインなどを公開している。

http://h2ham.seesaa.net/


徳田和規(とくだかずのり;5509;nori)

マインドフリー株式会社,ディレクター。Web製作会社にてHTML/CSSコーディングなどの業務を行いながらAjax/JavaScriptに興味を持ち,ブログで自作のjQueryプラグインなどを公開する。2009年9月からマインドフリー株式会社に参加。

http://moto-mono.net/