PengNote

勉強した事や行った場所の感想を書くブログ

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

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

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

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

それがこのjQuery Mask Plugin です。

例えば、

  • 2016/04/03のように年月日毎に/を挟みたい
  • 時間の表記を入力する時、2桁毎にコロン( : )を入れたい
  • 半角英数のみ認めて、全角英数の入力は弾きたい
  • 入力だけでなく、コピペにも対応したい

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

導入

<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をあてたり、パターンで絞り込むようなカスタマイズもできるのは良かった。

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

jQuery Mask Plugin – A jQuery Plugin to make masks on form fields and html elements.