エフトラEFOでは、テキストフィールドにどんな形式の文字列を入力して欲しいか、言い換えればどんな形式の文字列以外を入力した場合に、リアルタイムアラートを表示したいか、を管理画面で設定することができます。
※「リアルタイムアラート」は、エフトラEFOが入力項目のそばに表示するフキダシ型のメッセージです。
入力形式として指定できるのは、次の20種類です。管理画面で入力項目ごとに選択して保存するだけで指定できます。
- 半角
- 半角英数
- 半角数字
- 半角カナ
- 全角
- 全角かな
- 全角カナ
- 全角英数
- 全角数字
- カタカナ（全角または半角）
- 数字（全角または半角）
- 英字（全角または半角）
- メールアドレス
- ドメイン
- URL
- 半角数字または-(マイナス)
- 半角英数字または記号
- 他の項目と一致
- 入力形式チェックなし
- 正規表現と一致
このうち、「半角」から「半角英数字または記号」までの17個は、具体的な入力形式です。
「他の項目と一致」は、例えばメールアドレスやパスワードの確認欄など、別の入力欄と同じ文字列が入力されているかをチェックしたい場合に使います（入力内容が一致してない場合にアラートがでます）
最後の「正規表現と一致」は、上記の標準18個以外の入力形式でチェックしたい場合のためにご用意しています。
これまでにエフトラEFOを導入いただいた事例では、たいていの場合は標準18個のどれかで対応可能なケースがほとんどでしたが、中には「正規表現と一致」を使わないと対応できないケースがありました。例えば以下のようなものです。
・電話番号の最初の3文字に「090」「080」「070」以外を入力した場合にアラートを出したい
・パスワード欄に半角数字とアルファベットを1文字以上含まず入力した場合にアラートを出したい
・郵便番号のハイフンをダッシュなどでもOKとしたい
これらは「正規表現」を使うことでチェック可能になります。
正規表現の基本
正規表現のごく基本的な事柄について説明します。
条件 OR
まずは「aaa」または「bbb」というパターンです。正規表現では「|」（パイプ）を使います。「aaa|bbb」という書き方になります。
ワイルドカード
内容は問わず１文字という場合は「.」と書きます。
また、一群の文字列を指定する書き方、例えば、半角数字は、
[0-9]
と書きます。0-9は、0から9までの半角数字を意味します。
同様に、
半角アルファベット小文字は、「[a-z]」
半角アルファベット大文字は、「[A-Z]」
と書きます。
開始と終了
「^」が開始を意味する記号、「$」が終了を意味する記号です。半角数字１文字だけを許可する場合は、開始と終了の記号をつけて「^[0-9]$」となります。
２文字以上でもよしとする場合は、「^[0-9]+$」となります。さりげなく追加された「+」は、直前に記述された文字を１文字以上繰り返す、という意味になります。
以上から、「^[0-9０-９]+$」なら半角または全角の数字だけの文字列、
「^[a-zA-Z]+$」なら、半角アルファベットの小文字または大文字だけの文字列を意味します。
さて、冒頭にあげた「正規表現で一致」を使うと対応できる事例として紹介したケースですが、正規表現は以下のようになります。
電話番号の最初の3文字を「090」「080」「070」だけにしたい場合
「070|080|090」
パスワード欄に半角数字とアルファベットを含むようにしたい場合
「([0-9].*[a-zA-Z]|[a-zA-Z].*[0-9])」
郵便番号の入力形式のハイフンの種類を増やして許可したい
「^[0-9０-９]{3}[\-ー－―‐]?[0-9０-９]{4}$」
「禁止文字列」での正規表現
また、正規表現は、入力形式のチェックだけでなく「禁止文字列」でも使えます。
たくさんのパターンの文字列を禁止したい
いわゆる機種依存文字など禁止文字列を禁止したい場合が該当します。
例えば、①、②、③、④、⑤のどれかが含まれる場合にアラートを出したい場合は、
「①|②|③|④|⑤」
と書きます。
半角スペース、全角スペースだけの入力を禁止したい
「^[ |\s]+$」
と書きます。空白部分には、全角スペースを入力してください。
正規表現を書く方法
もちろん当社EFOサポート事務局にご相談いただくことでも構いませんが、ご自身で試したい場合、記述した正規表現が目的に合致してるかを確かめる方法をご紹介します。EFO管理画面に登録する前にこの方法で確かることで、いち早く目的を達成する正規表現を書けるはずです。
確かめ方
ブラウザの開発者ツールを使います。開発者ツールはたいていのブラウザには用意されています。今回は、開発者ツールのConsoleというパネルを使います。
確かめたい正規表現の他に、アラートを出さなくていい文字列と、アラートを出したい文字列を用意しましょう。例えば、「070」「080」「090」はアラートを出さなくていい文字列で、「040」「aaa」はアラートを出したい文字列です。
正規表現を確かめるためには、Consoleに
RegExp(“正規表現”).test(“入力例”)
という形式で入力してリターンキーを押します。
例えば、「^070|080|090$」という正規表現が、「090」という文字列に対してマッチしているかを確かめる場合、
RegExp(“^070|080|090$”).test(“090”)
と入力してリターンキーを押した後、「true」が帰ってきたら、正規表現が対象の文字列にマッチしたことになります。（マッチしたということは、入力形式の正規表現として使った場合、リアルタイムアラートはでない、ということになります）
trueが帰ってきた様子
RegExp(“^070|080|090$”).test(“aaa”)
とすると正規表現がaaaにマッチしないので「false」が帰ってきます。マッチしないときにEFOはアラートを出すので設定できていることになります。
いかがだったでしょうか。入力形式、禁止文字列で正規表現を使う必要がでた場合はぜひこの記事を活用してください。
