Vuetifyのフォームコンポーネントでバリデーションを行う

前提

• vue@2.6.14
• vuetify 2.6.2

どうやって実装した？

VuetifyのフォームコンポーネントにあるRulesプロパティを使った。 Rulesプロパティはルールの規則が格納された配列を指定した。 この指定したルールをもとにバリデーションを行ってくれる仕組みになっている。

コード例

実際に書いてみたコード。

HTML

<template lang="pug">
  v-container.ma-0.pa-0
    v-row(
      justify='center' align='center'
    )
      v-col(cols='12' xs='12' sm='5')
        v-text-field(
          hint='下限'
          dense
          v-on:input="emitLowerValue"
          v-bind:id="idName + '-lower-value'"
          :rules="rules"
        )
     
      (省略)
</template>

伝えたい部分は:rules="rules"の部分。 フォームコンポーネントのプロパティ:rulesにルールの配列rulesを格納。 ルールの配列はScriptの部分で定義していく。

Script

computed: {
    rules: function() {
      const rules = []
      const rule =
        v => !v || !isNaN(v) ||
          `数値のみ有効`
      rules.push(rule)

      if (this.idName.match(/price|sigmahat/)) {
        const rule =
        v => !v || !(Math.sign(v) === -1) ||
          `正の数のみ有効`
        rules.push(rule)
      }

      if (this.idName.match(/probability/)) {
        const rule =
        v => !v || !(Math.abs(v) > 50) ||
          `-50～50のみ有効`
        rules.push(rule)
      }
      return rules
    }
  },

computed(算出プロパティ)にルールの配列を返す関数を定義することで フォームから入力された値が変わるたびに、バリデーションを行う仕組みになっている。

ruleは関数として定義して、引数vは入力値である。

伝えたい部分はv => !v || !isNaN(v) || '数値のみ有効'の部分。

条件1 || 条件2 || 文言のような形でルールを定義する。

条件1を満たさず、さらに条件2も満たさない場合はバリデーションエラーとしてフォーム上に文言を注意喚起するという感じ。

（||はまたはなのでtrueが出現しない限り評価されるという規則を使っているよう。)

入力値がnullではなく、数値でもない場合は、数値を入力するように注意喚起するルールの例になる。

参照情報

Vuetify公式リファレンス(フォームコンポーネント) あとは、$vとか$touchなどわからない変数はvue.jsの公式リファレンスを読んでなんとか理解していった感じです。