Bootstrapを利用してフォームを実装しましたため、v-modelやバリデートなどについてまとめます。

イケてるフォーム

イケてるフォーム 初期状態
イケてるフォーム 初期状態
初期状態です。
入力内容に不備がある入力欄はエラーとして赤字、赤枠で表示します。
また全ての不備が取り切れるまで Submit ボタンは disabled とします。

イケてるフォーム エラー状態が即時に反映
イケてるフォーム エラー状態が即時に反映

何か入力し、エラーがなくなるとリアルタイムでフォームに反映されます。

イケてるフォーム Submit可能状態
イケてるフォーム Submit可能状態

全てのエラーがなくなると、Submit ボタンがアクティブになり、ボタンを押下することができます。


ごめんなさい、普通のフォームでした。

環境

  • Node.js 7.7.x
  • npm 4.4.x
  • Vue.js 2.2.x

素のHTML

イケてるフォーム Vue.js 化前の状態
イケてるフォーム Vue.js 化前の状態

上の状態、Vue.js の処理を入れる前の状態の HTML です。

 1<form class="form-horizontal">
 2  <fieldset>
 3    <legend>書籍登録</legend>
 4    <div class="form-group">
 5      <label for="inputTitle" class="col-md-2 control-label">タイトル</label>
 6      <div class="col-md-10">
 7        <input type="text" class="form-control" id="inputTitle" placeholder="書籍タイトル">
 8      </div>
 9    </div>
10    <div class="form-group">
11      <label for="inputSummary" class="col-md-2 control-label">サマリ</label>
12      <div class="col-md-10">
13        <textarea class="form-control" rows="3" id="inputSummary"></textarea>
14      </div>
15    </div>
16    <div class="form-group">
17      <label for="inputIsbn" class="col-md-2 control-label">ISBN</label>
18      <div class="col-md-10">
19        <input type="text" class="form-control" id="inputIsbn" placeholder="ISBN">
20      </div>
21    </div>
22    <div class="form-group">
23      <label for="inputRelease" class="col-md-2 control-label">発売日</label>
24      <div class="col-md-10">
25        <input type="date" class="form-control" id="inputRelease">
26      </div>
27    </div>
28    <div class="form-group">
29      <div class="col-md-10 col-md-offset-2">
30        <button type="submit" class="btn btn-primary center-block">Submit</button>
31      </div>
32    </div>
33  </fieldset>
34</form>

INPUT タグの name 属性は今回利用しないため、省略しております。

Vue.js の組み込み

ソース全文

 1<template>
 2  <form class="form-horizontal">
 3    <fieldset>
 4      <legend>書籍登録</legend>
 5      <div :class="errorClassObject('title')" class="form-group">
 6        <label for="inputTitle" class="col-md-2 control-label">タイトル</label>
 7        <div class="col-md-10">
 8          <input v-model="edit.title" type="text" class="form-control" id="inputTitle" placeholder="書籍タイトル">
 9        </div>
10      </div>
11      <div :class="errorClassObject('summary')" class="form-group">
12        <label for="inputSummary" class="col-md-2 control-label">サマリ</label>
13        <div class="col-md-10">
14          <textarea v-model="edit.summary" class="form-control" rows="3" id="inputSummary"></textarea>
15        </div>
16      </div>
17      <div :class="errorClassObject('isbn')" class="form-group">
18        <label for="inputIsbn" class="col-md-2 control-label">ISBN</label>
19        <div class="col-md-10">
20          <input v-model="edit.isbn" type="text" class="form-control" id="inputIsbn" placeholder="ISBN">
21        </div>
22      </div>
23      <div :class="errorClassObject('release')" class="form-group">
24        <label for="inputRelease" class="col-md-2 control-label">発売日</label>
25        <div class="col-md-10">
26          <input v-model="edit.release" type="date" class="form-control" id="inputRelease">
27        </div>
28      </div>
29      <div class="form-group">
30        <div class="col-md-10 col-md-offset-2">
31          <button
32            @click="doSubmit"
33            :disabled="isValid == false"
34            type="submit" class="btn btn-primary center-block">Submit</button>
35        </div>
36      </div>
37    </fieldset>
38  </form>
39</template>
 1<script>
 2const isbn10RE = /^[0-9]{9}[0-9X]$/
 3const dateRE   = /^[0-9]{4}-[0-9]{2}-[0-9]{2}$/
 4
 5export default {
 6  data() {
 7    return {
 8      edit: {
 9        title  : "",
10        summary: "",
11        isbn   : "",
12        release: ""
13      },
14      maxLength: 10
15    }
16  },
17  computed: {
18    validation() {
19      const edit = this.edit
20      return {
21        title  : (!!edit.title && edit.title.length <= this.maxLength),
22        summary: (!!edit.summary),
23        isbn   : (!!edit.isbn    && isbn10RE.test(edit.isbn)),
24        release: (!!edit.release && dateRE.test(edit.release))
25      }
26    },
27    isValid() {
28      const validation = this.validation
29      return Object
30        .keys(validation)
31        .every(function (key) {
32          return validation[key]
33       })
34     }
35  },
36  methods: {
37    errorClassObject(key) {
38      return {
39        'has-error': (this.validation[key] == false)
40      }
41    },
42    doSubmit() {
43      // 美しさに感動してしまうPOST処理
44    }
45  }
46}
47</script>

解説

処理の流れ

コードの動かすと次のような流れで処理が連携されていることがわかります。

  • v-model を設定したリアクティブな INPUT タグを入力する
  • 算出プロパティが再計算され、各パラメーターのバリデート結果が更新される
  • バリデート結果に応じて has-error クラスのバインドも更新される

それぞれ見ていきましょう。

v-model

Vue.js > ガイド > フォーム入力バインディング
https://jp.vuejs.org/v2/guide/forms.html

フォームといえばv-modelです。

v-model を HTML に埋め込むだけで簡単に双方向データバインディングを実現することができます。

1<input v-model="edit.title" type="text" class="form-control" id="inputTitle" placeholder="書籍タイトル">

たったこれだけです。
あまりにも簡単なため、説明することがありません。。。

クラスのバインディング

Vue.js > ガイド > クラスとスタイルのバインディング
https://jp.vuejs.org/v2/guide/class-and-style.html

バリデートエラー時にクラス[ has-error ]を適用するため、v-bindでクラスをバインドします。

基本のフォーマットは次です。

1v-bind:class="{クラス名: 式}"

上がオブジェクト構文ですね。

今回の HTML をオブジェクト構文で記述するならば次のようになります。

1v-bind:class="{'has-error': validation.title == false }"

私は視認性から否定( ! )をあまり好まないため、[ == false]を使うようにしているのですが、全てのパラメーターにこれを埋め込むのは手間であるため、メソッドをバインドしております。

1errorClassObject(key) {
2  return {
3    'has-error': (this.validation[key] == false)
4  }
5}

噛み砕くと、「クラス名と、そのクラスを適用するかの真理値」を対にしたオブジェクトを与えれば良いのです。

たとえば、次のようにして複数のクラスを適用することも可能です。

1{
2  'class-a': true,
3  'class-b': true
4}

Vue.js では複雑な処理はテンプレート書かず、メソッドなり、後述する算出プロパティに実装することが推奨されています。

できるだけ HTML は <template> に、JavaScript 処理は <script> に実装することが見通しの良いコードにするための第一歩ですよね。

バリデーション

Vue.js > ガイド > 算出プロパティとウォッチャ
https://jp.vuejs.org/v2/guide/computed.html

今回のサンプルでは算出プロパティを用いてバリデーション結果を管理しております。

算出プロパティは キャッシュされ、リアクティブ依存が変更されたときだけ再計算される ことがの大きな特徴です。
名称から常に計算されるコストが高い処理と誤解してしまいましたが、そうではありませんでした。

サンプルの該当部分は以下です。

 1computed: {
 2 validation() {
 3   const edit = this.edit
 4   return {
 5     title  : (!!edit.title),
 6     :
 7   }
 8 },
 9 isValid() {
10   const validation = this.validation
11   return Object
12     .keys(validation)
13     .every(function (key) {
14       return validation[key]
15    })
16  }
17},

validation() は、this.edit の各値をチェックし、次の形のオブジェクトを返しています。

1{
2  'title': true,
3  'summary': false,
4  :
5}

isValid() は validation() の結果を受け、全てのバリデーションがtrueかをチェックする関数です。

これを利用し、Submit ボタンに prop.disabled をバインドしています。

1<button :disabled="isValid == false"  -略- >

validation()、isValid() は、ほぼ次の公式ページのままです。

Vue.js > 例 > Firebase + バリデーション の例
https://jp.vuejs.org/v2/examples/firebase.html

もう一歩

ライブラリ連携

既存コードが Bootstrap でフォームを組み立てている場合など、日付入力に Bootstrap datepicker を利用している場合があると思います。

この datepiker を利用する場合、例えば、ブラウザ上では datepicker で「1/17」を「1/31」に変更しても、Vue.js のコードでは編集前の「1/17」となってしまうようなど、そのままでは 「画面表示とスクリプトから見た値が異なる」という不具合 となってしまいます。

このようになってしまう理由は datepicker がユーザ入力を伴わずに DOM を更新してしまい、Vue.js 側で変更を検知できないためのようです。

この対処方法は「datepicker.on でイベントを購読する」で、Github に issue が上がっていました。

when use vue2.0 and bootstrap-datepicker, and use v-model can not get the date value. #4231
https://github.com/vuejs/vue/issues/4231

上記からコードを引用します。
次のように on.changeDate を設定して、Vue.js の data に直接セットしてあげます。

1$('#startDate').datepicker().on(
2  'changeDate',() => {
3    this.startDate = $('#startDate').val()
4  }
5)

仕方がありませんが、HACK ですね。

共存について、次の記事にまとめました。

[Vue.js] Vue.js と bootstrap-datepicker を連携する
リプレイスなどでやむなく bootstrap-datepicker と Vue.js を連携しなけれならない、という場合の対処方法です。 Laravel での実装を想定しておりますが、ディレクトリ構成などは適宜読
atuweb.net

なお、次のような Vue.js 用の datepieker もたくさん公開されております。

hilongjw/vue-datepicker
https://github.com/hilongjw/vue-datepicker

操作感が若干異なりますが、新規プロジェクトには大人しく Vue.js にあったものを採用するのが良いです。

複雑なバリデーション

複雑なバリデーションを行う場合、メソッドを定義したくなりますが、書き方に注意してください。

次の書き方は期待通りにはなりません。

1validation() {
2  return {
3    title: () => {
4      // これはNG、なぜなら関数が定義されるだけだから
5    },
6  }
7},

このように即時関数を利用するとOKでした。

 1validation() {
 2  return {
 3    title: (() => {
 4      if (hoge) {
 5        return false
 6      }
 7      return true
 8    })()
 9  }
10},

vue-validator

複雑なバリデートを行う場合、vue-validatorという素晴らしいライブラリが公開されております。

kazupon/vue-validator
https://github.com/kazupon/vue-validator

複雑な構造

イテレーターを利用する場合など、validation() で返すオブジェクトの階層が深くなる場合もあると思います。

 1validation() {
 2  return {
 3    address1: {
 4      zipCode: true,
 5      phone  : true,
 6    },
 7    address2: {
 8      zipCode: true,
 9      phone  : true,
10    }
11  }
12},

前述の isValid() はオブジェクトが 1 階層であることを前提にしておりそのままでは動きません。
そのため、次のようにオブジェクトのチェックを切り出すなどして対処すれば OK です。

 1computed: {
 2  isValid() {
 3    const validation = this.validation
 4    return (
 5      this.itOkey(validation.address1) &&
 6      this.itOkey(validation.address2)
 7    )
 8  },
 9},
10methods: {
11  itOkey(params)
12  {
13    return Object
14      .keys(params)
15      .every(function (key) {
16        return params[key]
17    })
18  }
19}

おわりに

Vue.js ならフォームに双方向バインディングするのも、バリデーション結果をリアルタイムに反映するのも驚くほど簡単です。
この記事が、モダン JavaScript 導入のとっかかりになりますと幸いです。

WEB+DB PRESS Vol.97

外村 和仁,小林 徹,古川 陽介,佐藤 歩,yoku0825,是澤 太志,一野瀬 翔吾,加藤 颯史,のざき ひろふみ,うらがみ,水嶋 淳貴,久田 真寛,久保 達彦,伊藤 直也,遠藤 雅伸,ひげぽん,海野 弘成,はまちや2,竹原,倉岡 洋義
出版社:技術評論社  発売日:2017-02-24

Amazonで詳細を見る

Vue.js入門 基礎から実践アプリケーション開発まで

川口 和也,喜多 啓介,野田 陽平,手島 拓也,片山 真也
出版社:技術評論社  発売日:2018-09-22

Amazonで詳細を見る

基礎から学ぶ Vue.js

mio
出版社:シーアンドアール研究所  発売日:2018-05-29

Amazonで詳細を見る

この記事の著者 Webrow (うぇぶろう)
Web アプリ開発、 Web 顧問 エンジニア、WordPress サポートいたします。