Vue.js Validator 使う

ドキュメントはこちら
http://vuejs.github.io/vue-validator/ja/index.html

インストール

$ npm install vue-validator --save

セットアップ

var VueValidator = require('vue-validator')

Vue.use(VueValidator)

バリデーションの記述

HTMLの中にガシガシねじ込んでいきます。

  <validator name="validation1">
    <form novalidate>
      <div class="username-field">
        <label for="username">username:</label>
        <input id="username" type="text" v-validate:username="['required']">
      </div>
      <div class="comment-field">
        <label for="comment">comment:</label>
        <input id="comment" type="text" v-validate:comment="{ maxlength: 256 }">
      </div>
      <div class="errors">
        <p v-if="$validation1.username.required">Required your name.</p>
        <p v-if="$validation1.comment.maxlength">Your comment is too long.</p>
      </div>
      <input type="submit" value="send" v-if="$validation1.valid">
    </form>
  </validator>

validation カスタム要素のname属性で変数名を定義し、結果を格納していきます。

フォームとのバインディングには、v-validateを使用し、v-model は必須ではなくなりました。

v-validateはあくまでバリデーション目的のみに使用され、任意のフィールドのみv-modelを通じバインディングを活用する事が可能です。

ルールの記述

<input id="username" type="text" v-validate:username="['required']">
<input id="comment" type="text" v-validate:comment="{ required:true, maxlength: 256 }">

上記に見られるようにルールはv-validate属性にフィールド名を渡して実装可能です。

フィールド名はvalidation内部での識別子で、v-model等のバインディングとは関係なさそう。

配列の表記はrequiredのように値を必要としないルールでのみ使用可能で、通常はオブジェクトを使用する方が良さそう。

ルールはカジュアルにHTMLにガシガシねじ込むことも可能だが、""ないの配列ないしオブジェクトは変数参照することも可能で、JS側で管理するのも難しくなさそう。

メッセージの記述

<p v-if="$validation1.username.required">Required your name.</p>
<p v-if="$validation1.comment.maxlength">Your comment is too long.</p>

validatorオブジェクトで指定した変数名で、バリデーション結果を動的に取得できる。

各種ルール名でルール毎の結果が取得できるほか、valid dirtyなどのプロパティも生えているのでそちらを参照しても。

$validation1 にもvalid dirtyなどのプロパティは生えており、こちらはフィールドセット全体の結果となる。

バリデーションルール

初期組み込みのバリデータルールとしては以下のものが用意されている。

• required: 値が指定されているかどうか
• pattern: 指定された値が正規表現のパターンかどうか
• minlength: 指定された値の長さが最小以下の長さかどうか
• maxlength: 指定された値の長さが最大以上の長さかどうか
• min: 指定された数値が最小以下かどうか
• max: 指定された数値が最大以上かどうか

カスタムのルール定義も簡単に出来るっぽい。

new Vue({
  el: '#app',
  validators: { // `numeric` と `url` のカスタムバリデータはローカル登録です。
    numeric: function (val/*,rule*/) {
      return /^[-+]?[0-9]+$/.test(val)
    },
    url: function (val) {
      return /^(http\:\/\/|https\:\/\/)(.{4,})$/.test(val)
    }
  },
  data: {
    email: ''
  }
})

Promise をreturnして非同期バリデーションも組めるっぽい。超便利