angularJSのng-pattern/min/maxで正規表現。

Level 2｜｜2016/08/01

JSの正規表現リテラルを使って、入力される文字列を、指定した文字組み合わせパターンかどうか判定できます。
たとえば、サンプルでも活用している「郵便番号」や「日時」は、予め文字のパターンが決まっています。
郵便番号は、[0～9の3桁]-[0から9の4桁]、
日時は、[年月日時分秒]
というように形式が決まっています。とはいえ、入力するときは、その時の気分や独自のパターンは人それぞれですので、これを統一させること、また処理速度も考えて、正規表現リテラルを使用します。

目次まずは、全体の動きを確認「ng-pattern」で正規表現リテラルを使う郵便番号の正規表現リテラル「min」「max」属性で日時指定 ISO-8601の基本・拡張形式

まずは、全体の動きを確認

実際にサンプルを触ってみたい方はこちら


<form name="myForm" ng-submit="onsubmit()" novalidate>

  <div>
    <label for="zip">郵便番号：</label>
<!-- 入力ボックス -->
    <input id="zip" name="zip" type="text" ng-model="zip"
      ng-pattern="/^[0-9]{3}-[0-9]{4}$/" required />
    <span ng-show="myForm.zip.$error.pattern">
      ハイフン有「123-4567」で入力
  </div>

  <div>
    <label for="now">日時：
<!-- 入力ボックス -->
    <input id="now" name="now" type="datetime-local" ng-model="current"
      min="1990-01-01T00:00:00" max="2050-12-31T23:59:59" required />
  </div>

</form>

上記サンプルの「郵便番号」は、先に説明したとおり[0～9の3桁]-[0から9の4桁]のパターン、「日時」については、[年月日時分秒]のパターンでの入力が求められています。日時を入力しようとするとカレンダーが表示されるのは、HTML5のtype属性が「datatime」「datatime-local」の場合に限られます。（この機能は対応ブラウザが限られていますので、ご注意ください。）

「ng-pattern」で正規表現リテラルを使う


  <div>
    <label for="zip">郵便番号：</label>
<!-- 入力ボックス -->
    <input id="zip" name="zip" type="text" ng-model="zip"
      ng-pattern="/^[0-9]{3}-[0-9]{4}$/" required />
    <span ng-show="myForm.zip.$error.pattern">
      ハイフン有「123-4567」で入力
  </div>

AngularJSの「ng-pattern」属性は、入力文字のパターンを設定できます。

郵便番号のパターンは、[0～9の3桁]-[0から9の4桁]です。これを正規表現リテラルにすると、「/^[0-9]{3}-[0-9]{4}$/」になります。

郵便番号の正規表現リテラル

「/^」
これは、入力の先頭にマッチしているかどうかという意です。
たとえば、ng-patternの値に「/^a/」と記述した場合、入力ボックスに「a」と入力すればマッチしますが、「b」と入力するとマッチしません。

「$/」
これは、入力の末尾にマッチしているかどうかという意です。
たとえば、ng-patternの値に「/a$/」と記述した場合、入力ボックスに「a」と入力すればマッチしますが、「b」と入力するとマッチしません。

「[0-9]」
これは、入力が角括弧で囲まれた文字のどれか１個にマッチしているかどうかという意です。
たとえば、ng-patternの値に「/[0-9]/」と記述した場合、入力ボックスに0から9のいずれかを入力すれば、マッチしますが、「a」と入力するとマッチしません。

「{3}」
これは、入力の直前の文字が〇回出現するものにマッチしているかどうかという意です。サンプルで言うと、3回出現したものがマッチします。
たとえば、ng-patternの値に「/[a]{3}/」と記述した場合、入力ボックスに「aaa」と入力すれば、マッチしますが、「abc」と入力するとマッチしません。

正規表現リテラルはこの他にもいろいろありますので、リファレンスなどを参考にしてください。

「min」「max」属性で日時指定


  <div>
    <label for="now">日時：
<!-- 入力ボックス -->
    <input id="now" name="now" type="datetime-local" ng-model="current"
      min="1990-01-01T00:00:00" max="2050-12-31T23:59:59" required />
  </div>

AngularJSの「min」属性・「max」属性は、最小値・最大値を設定できます。先に学んだ「ng-minlength」属性「ng-maxlength」属性が「文字数」に対して、「min」属性・「max」属性は「値」を扱う属性です。筆者が混乱未遂だったので、一応・・・・。

サンプルの日時では、minに「1990-01-01T00:00:00」、maxに「2050-12-31T23:59:59」を設定しています。「1990年1月1日00時00分00秒」から「2050年12月31日23時59分59秒」の間という意味になります。

ここで注意しなければいけないのが、この日時指定の正規表現は「国際規格　ISO-8601」形式で指定します。以下にさらっと説明しますが、詳しく知りたい方はリファレンスを参考にしてください。