フォームでの簡単なバリデーションにjQuery Mask pluginがまぁまぁ便利だった

2016.4.7

流れにのってES6かTypeScriptにいきたいなーと思いつつ、プラグインの恩恵が凄くて感謝しながらjQuery使ってます。

さて、この間フォームを組むことがあって、その中で 簡単なバリデーションをしたい という要望がありました。

自分で組んでもよかったのですが中には面倒なものもあって便利なプラグインはないものかーと思っていたら有りました。

それがこのjQuery Mask Plugin です。

例えば、

この辺は大丈夫だった気がします。

導入

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="FILEPATH/jquery.mask.min.js"></script>

プラグインお約束のjQueryの後で読み込みます。

$(function(){
  $('.date').mask('00/00/0000');
});

そして、実際に使うときはこんな感じで、バリデーションを当てたい要素に対してmaskメソッドを繋ぎ、引数で指定するだけです。何を指定するのかはサイトを見てください。

また、単に入力のチェックを行うだけでなく、placeholderをあてたり、パターンで絞り込むようなカスタマイズもできるのは良かった。

しかし、作者が海外の人のようなので、色んなバリデーションが海外仕様で使えないものも幾つかある。