エフトラEFOを120%活用するための「正規表現」入門

エフトラEFOでは、テキストフィールドにどんな形式の文字列を入力して欲しいか、言い換えればどんな形式の文字列以外を入力した場合に、リアルタイムアラートを表示したいか、を管理画面で設定することができます。
※「リアルタイムアラート」は、エフトラEFOが入力項目のそばに表示するフキダシ型のメッセージです。

入力形式として指定できるのは、次の20種類です。管理画面で入力項目ごとに選択して保存するだけで指定できます。

  1. 半角
  2. 半角英数
  3. 半角数字
  4. 半角カナ
  5. 全角
  6. 全角かな
  7. 全角カナ
  8. 全角英数
  9. 全角数字
  10. カタカナ(全角または半角)
  11. 数字(全角または半角)
  12. 英字(全角または半角)
  13. メールアドレス
  14. ドメイン
  15. URL
  16. 半角数字または-(マイナス)
  17. 半角英数字または記号
  18. 他の項目と一致
  19. 入力形式チェックなし
  20. 正規表現と一致

このうち、「半角」から「半角英数字または記号」までの17個は、具体的な入力形式です。
「他の項目と一致」は、例えばメールアドレスやパスワードの確認欄など、別の入力欄と同じ文字列が入力されているかをチェックしたい場合に使います(入力内容が一致してない場合にアラートがでます)

最後の「正規表現と一致」は、上記の標準18個以外の入力形式でチェックしたい場合のためにご用意しています。

これまでにエフトラEFOを導入いただいた事例では、たいていの場合は標準18個のどれかで対応可能なケースがほとんどでしたが、中には「正規表現と一致」を使わないと対応できないケースがありました。例えば以下のようなものです。

・電話番号の最初の3文字に「090」「080」「070」以外を入力した場合にアラートを出したい
・パスワード欄に半角数字とアルファベットを1文字以上含まず入力した場合にアラートを出したい
・郵便番号のハイフンをダッシュなどでもOKとしたい

これらは「正規表現」を使うことでチェック可能になります。

正規表現の基本

正規表現のごく基本的な事柄について説明します。

条件 OR

まずは「aaa」または「bbb」というパターンです。正規表現では「|」(パイプ)を使います。「aaa|bbb」という書き方になります。

ワイルドカード

内容は問わず1文字という場合は「.」と書きます。

また、一群の文字列を指定する書き方、例えば、半角数字は、
[0-9]
と書きます。0-9は、0から9までの半角数字を意味します。
同様に、
半角アルファベット小文字は、「[a-z]」
半角アルファベット大文字は、「[A-Z]」
と書きます。

開始と終了

「^」が開始を意味する記号、「$」が終了を意味する記号です。半角数字1文字だけを許可する場合は、開始と終了の記号をつけて「^[0-9]$」となります。

2文字以上でもよしとする場合は、「^[0-9]+$」となります。さりげなく追加された「+」は、直前に記述された文字を1文字以上繰り返す、という意味になります。

以上から、「^[0-90-9]+$」なら半角または全角の数字だけの文字列、
「^[a-zA-Z]+$」なら、半角アルファベットの小文字または大文字だけの文字列を意味します。

さて、冒頭にあげた「正規表現で一致」を使うと対応できる事例として紹介したケースですが、正規表現は以下のようになります。

電話番号の最初の3文字を「090」「080」「070」だけにしたい場合
「070|080|090」

パスワード欄に半角数字とアルファベットを含むようにしたい場合
「([0-9].*[a-zA-Z]|[a-zA-Z].*[0-9])」

郵便番号の入力形式のハイフンの種類を増やして許可したい
「^[0-90-9]{3}[\-ー-―‐]?[0-90-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」が帰ってきたら、正規表現が対象の文字列にマッチしたことになります。(マッチしたということは、入力形式の正規表現として使った場合、リアルタイムアラートはでない、ということになります)

dev_regexp

trueが帰ってきた様子

RegExp(“^070|080|090$”).test(“aaa”)
とすると正規表現がaaaにマッチしないので「false」が帰ってきます。マッチしないときにEFOはアラートを出すので設定できていることになります。

いかがだったでしょうか。入力形式、禁止文字列で正規表現を使う必要がでた場合はぜひこの記事を活用してください。

この記事が気に入ったら
いいね!しよう

UI改善ブログの最新情報をお届けします

エフトラEFO機能アイコン

UI改善ブログを運営する株式会社エフ・コードでは
UI改善の基本施策を簡単に実施できる「エフトラEFO」「エフトラCTA」を開発しています。

エフトラEFOサイトへ エフトラCTAサイトへ

UI改善ブログ by f-tra の購読

当ブログの更新情報は以下の各種アカウントから購読できます。

メールマガジンを購読する

ブログの更新情報やセミナーのお知らせなど、
UI改善に関する情報を1~2週間に1回お届けします。

メールアドレスを入力

 購読解除はいつでも可能です