のらねこの気まま暮らし

技術系だけど、Qiita向きではないポエムとかを書くめったに更新されないヤツ

Heimdall.jsを0.0.2にあげたよ #開発二部

金剛改二がかわいすぎて何も考えずにクリックするだけなのが最近の提督業です。 こんばんわ、Heimdall.jsを0.0.2にアプデしました。

いんすとーる?

bowerでインストールしとくと管理が楽なのでたとえば、

$ bower install --save 'rymizuki/Heimdall#0.0.2'

とかすればいいと思います。ヽ(=´▽`=)ノ

なにが変わったの?

主な更新は二点

  • オレオレコーディングルールだったのを一部jquery-pluginの流儀に合わせた
  • 特定のinputに対してバリデーションできるようになった

一つ目のは単にgrunt周りとjshint周りを調整したのとか細かいのだけ。ホントはインデントとかメソッド名とかも調整したかったんだけど、結構手間・・・だったので・・・。 気付きとしては、testにjshintかけるの大切だなぁと思ったこと。

testemを使ってmochaでテストを走らせているのだけれど、method名間違ってたりtypo系のうっかりミスが多かったりして、この作業中に気づいた事が多々。 javascriptのsyntax errorが出ると走らないんだよね、テスト。でも正常終了する。怖い。 完璧ではないけれど、ブラウザでの動作確認、及びjshintによる制約掛けは大切ですね!

ふたつめ。 布教も兼ねてformizeつかって説明します。←

var heimdall = $.heimdall({
  name: ['required', ['length', [1, 10]],
  age   : ['required, 'int'],
  // ... その他のrule
});

var form = $.forimze('#my-form');
form.getControl('name').on('keyup', function () {
  var $this = $(this);
  var result = heimdall.validate('name', $this.val());

  if (result.has_error()) {
    alert('nameは1文字以上10文字以下じゃないとダメなんだお ヘ(゚∀゚ヘ)アヒャ');
  }
});
form.on('submit', function () {
  var data = form.getValues();
  var result = heimdall.validate(data);

  if (result.has_error()) {
    alert('正しくない入力があるから送信できないよぅ (´Д⊂グスン');
  } else {
    $.post(url, data).done(function () {
      alert('送信したお ヽ(=´▽`=)ノ');
    });
  }
});

nameというname属性を与えたinput要素のkeyupイベントに、入力値が1文字以上10文字以下じゃないとnameは1文字以上10文字以下じゃないとダメなんだお ヘ(゚∀゚ヘ)アヒャという文言を表示するなんとも鬱陶しいコードが出来上がりました。たぶん動くはず。

何が言いたいかというと、formって単位じゃなくてinputの単位でも入力値のチェックが簡単にできるようになったということで、よくある入力がOKになるまで赤文字でエラー文言だしとくとか、入力値がエラーになったタイミングで表示を切り替えるとかが簡単にできるようになったわけです。ビバリッチUI!

ぜひつかって見てね☆ミ