フォームに入力文字制限をかけるjsライブラリ「imaskjs」



 インプットフォームに入力出来る " 文字の種類 "や " 文字数 " を制限させる  javascript用のライブラリ  「imaskjs」の紹介です。

 必要情報を 入力フォームで データを登録する時、 サーバーに送信する前に 値の整合性が取れているかチェックする為に バリデーションを用いることはよくあります。

 下のインプットフォームの画像を例に取ると、" 郵便番号は 7桁 ", " 携帯電話 の番号は 11桁 " + どちらも数字 の必要があります。

フォームの一例

 郵便番号のフォームに " 七桁の数字以外 " が入力されていれば、「郵便番号が正しくありません」のような メッセージを表示させるところですが、" 七桁の数字までしか入力出来ないように入力自体を制限する " そんな事が簡単に出来る javascript 用の ライブラリ が「imaskjs」です。

imaskjs で出来ること

- インプットフォーム入力時に 特定の文字、文字数 しか入力出来ないように 制限をかけることができる

imaskjs のインストール

 imaskjs の入手は ' npm ' や '  yarn ' などの、パッケージマネージャーを通して。その他に ブラウザ上から CDN を通して直接読み込むことが出来ます。

# npm
npm i imask
# yarn
yarn add imask
# cdn * ブラウザの script src から下記のURLを読み込む場合
<script src="https://unpkg.com/imask"></script>


imaskjs の概要 

 imaskjs は HTMLタグにコードを追加する必要が無いので、既にある inputフォームにも簡単に適応させることができます。

 IMaskオブジェクトを インスタンス化した時の第一引数には ' 元となるインプットフォームのエレメント ( id, クラスなど ) '、第二引数には ' 許可する文字や、桁数などのパターン ' をオブジェクトで指定します。

import IMask from "imask"; // ブラウザからCDNとして呼び出す場合は必要ありません
// const import = require('imask) // CommonJS

//  ブラウザからCDNを通して呼び出す場合、 IMask()が直接呼び出せます
new IMask(Element, Pattern);

mask ( *第二引数 ) で使えるバターン
 : 0 - 数字
 : a - アルファベット
 : * - 全ての文字
 : {} - 指定した特定文字
 : ` - 特殊記号をエスケープする場合

// 特定パターン入力を許可する例

// 三桁の数字のみ許可する場合
{ mask : "000" }
// 4桁のアルファベットのみを入力許可にする場合
{ mask : "aaaa" }
// 'あ' 'い' 'う' の三文字のみ三桁で許可
{ mask: "{あ}{い}{う}" }


 definitions オプションを使うと mask オブジェクト内の任意の文字に、正規表現を使って特定のパターンを割り当てる事ができます。

var samplePattern = {
  mask: "#-0000", // #に aからzまでの文字しか入力出来ないように制限
  definitions: { '#': /[a-z]/ }
};


imaskjs を使った 郵便番号 のフォーム例  

こちらは imaskjs を使って、郵便番号用のインプットフォームに適応させる例です。

 日本の郵便番号は 7桁の 数字のみとフォーマットが決まっています。なので、フォーム上にも ' 7桁の数字のみしか入力出来ない ' ように入力制限をかけています。

<!-- 郵便番号用のインプットフォーム -->
<div class="form-group">
   <label for="zipCode">郵便番号</label>
   <!-- id名は zipCode -->
   <input type="text" class="form-control" id="zipCode" placeholder="郵便番号">
</div>

* 上のHTMLコードの input フォーム ( ' - ' は自動入力されます ) 

import IMask from "imask"; // CDNから読み込んでいる場合は必要ありません

// inputフォーム id='zipCode' の値を取得
var el = document.getElementById('zipCode');

// 日本の郵便番号用のパターン
var zipMask = {
  mask: "000-0000"
};
// imaskjsをインスタンス化
var zip = new IMask(el, zipMask);
// 値の取り出し * 実際に使う時はクリックイベントなどと一緒に使います
console.log(zip.value) // 000-0000
console.log(zip.unmaskedValue) // 0000000

 

imaskjs を使った 携帯電話番号 のフォーム例  

こちらは ' 日本の携帯電話の番号 ' のフォーム例です。

日本の携帯電話番号は ( 090 | 080 | 070 ) の先頭パターンから始まる、合計11桁の数字とフォーマットが決まっているので、指定パターンの数字しか入力出来ないように制限しています。

<div class="form-group">
  <label for="cellerPhone">携帯番号</label>
  <input type="text" class="form-control" id="cellerPhone" placeholder="携帯電話">
</div>

* 上のHTMLコードの input ( * bootstrapを適応させています )

下のコードでは、imaskjs の ' definitions ' オプションを使って、携帯電話の先頭の ' 0( 7| 8 | 9) 0 ' 部分を正規表現プラス " # " の文字に、パターンを割り当てています。

import IMask from "imask";

// id="cellularPhone"の値を取得
var el = document.getElementById('cellularPhone');
// 携帯電話用のパターン  * 0{7,8,9}0-0000-0000の11桁のみ許可
var phoneMask = {
  mask: "{0}#{0}-0000-0000",
  definitions: {
    '#': /[7-9]/ 
  }
};

var cellularPhone = new IMask(el('cellularPhone'), phoneMask);

// 実際にアウトプットする時は数字で取得できます
console.log(cellularPhone.value) // 0(7|8|9)0-0000-0000
console.log(cellularPhone.unmaskedValue) // 0(7|8|9)000000000


実際にimaskjs を使ってフォームに適応したデモ

See the Pen imaskjs demo by cupof (@cupof-github) on CodePen.


Summary

 以上が imasjs の紹介でした。全てのフォームバリデーションを置き換える事は難しいですが、" 決まった桁 ", " 決まった文字 " を入力するフォームなど、データの整合性が必要な時に 補助として使うと 便利に使えるライブラリです。

GitHub : uNmAnNeR/imaskjs

 

この記事のカテゴリ
プログラミング

この記事に付けられているタグ