JavaScript
vue.js
vuetifyjs

Vuetify.jsのFormの組み込みバリデーションがつらいなと思ったら

結論

バリデーションモジュールをnpmから持ってきて使えば良い。

検証環境

Vuetify.js 0.17
https://vuetifyjs.com/

導入方法

1. バリデーションモジュールをプロジェクトに導入

https://github.com/chriso/validator.js

今回はこちらを使用。
単純にbooleanを返すものであれば何でもよい。

npm install validator --save

2. rulesで利用

validatorモジュールの検証結果がtrueを返すように記述する。
必須チェックはそのままの記述の方が分かりやすい。

<template>
<v-form v-model="valid" ref="form" lazy-validation>
    <v-text-field
      label="メールアドレス"
      v-model="email"
      :rules="emailRules"
      :counter="255"
      required
    ></v-text-field>

    <v-btn>保存</v-btn>
</v-form>
</template>

<script>
import validator from 'validator'

export default {
  data () {
    return {
      valid: true,
      email: '',
      emailRules: [
        v => !!v || 'メールアドレスは必須です',
        v => validator.isLength(v, { max: 128 }) || '128文字以下にしてください'
      ],
    }
  }
}
</script>

以上。