Help us understand the problem. What is going on with this article?

nuxt.jsでフォームにバリデーションをつける。

  • 個人でRailsとnuxtを利用したWebアプリケーション開発を行なっています。
  • nuxt(Vue)でフォームに対してバリデーションをつけたいと思ったときに使われるVeeValidateがお手軽だったので、導入方法をまとめます。

前提として

  • nuxt.jsのアプリケーションが作成手順に関してはこの記事では割愛します。
  • yarnのコマンドを書いておりますが、npmを利用の場合は適宜変更をお願いします。

導入手順

VeeValidateのインストール

  • nuxt.jsのアプリケーションのディレクトリで下記コマンドを実行します。

$ yarn add vee-validate

  • package.json内にVeeValidateがインストールされてるかと思います。(dependencies下に追加されてればOKです。)
package.json
{
   "dependencies": {
      "vee-validate": "^3.0.11"
   }
}

Pluginとして読み込む

  • pulgins下にVeeValidateの設定用のファイルを作成します。
plugins/vee-validate.js
import Vue from 'vue'
import { ValidationProvider, ValidationObserver, localize, extend } from 'vee-validate'
import ja from 'vee-validate/dist/locale/ja.json' // エラーメッセージを日本語化します
import { required, numeric } from 'vee-validate/dist/rules' // 使用するバリデーションルールを指定します。

// VeeValidateが用意している各ルールを使用するよう指定
extend('required', required) // 必須項目のバリデーション
extend('numeric', numeric)

// 下記は固定で書く
Vue.component('ValidationProvider', ValidationProvider)
Vue.component('ValidationObserver', ValidationObserver)
localize('ja', ja)

  • nuxt.config.jsで作成した設定用のファイルを読み込むよう編集します。
nuxt.config.js
plugins: [
    // 下記追加
    '~/plugins/vee-validate'
]

build: {
    // 下記追加
    transpile: [
      "vee-validate/dist/rules"
    ]
}

フォームのバリデーションを実現する

- 今回はお試しとしてもともとあるvueファイルに編集する形でフォームを作成します。

pages/index.vue
<template>
  <div class="form">
    <div class="field">
      <label class="label">ID</label>
      <div class="control">
        <validation-provider v-slot="{ errors }" rules="required" name="ID">
          <input v-model="id" class="input" type="text" />
          <p v-show="errors.length" class="help is-danger">
            {{ errors[0] }}
          </p>
        </validation-provider>
      </div>
    </div>
    <div class="field">
      <label class="label">PASSWORD</label>
      <div class="control">
        <validation-provider v-slot="{ errors }" rules="required" name="パスワード">
          <input v-model="password" class="input" type="password">
          <p v-show="errors.length" class="help is-danger">
            {{ errors[0] }}
          </p>
        </validation-provider>
      </div>
    </div>
  </div>
</template>

<style scoped>

.container {
  text-align: center;
}

.is-danger {
  color: red;
}
</style>

<script>

export default {
  data () {
    return {
      id: '',
      password: ''
    }
  }
}
</script>
  • 下記のように入力が何もないと、エラーメッセージが出るようになります。(bulmaとか当てると綺麗なフォームになるのですが、今回は適当にスタイル当ててます。)
  • エラーメッセージが存在するときには作成ボタンを押せないようにするフラグなどを用意すれば、今風のフォームが出来そうですね!

作成画面.png

提供されているバリデーション

rules 出来ること
require 入力を必須にする
numeric 数字の入力のみ受けつける
email Eメールの入力のみ受けつける
max 最大文字数を制限する
min 最小文字数を制限する
max_value 数値の最大値を制限する
min_value 数値の最小値を制限する
between 指定した間の数値に制限する

  • 導入がすんなり出来てルールも豊富なので非常に使い勝手が良いと感じました!
  • エラーメッセージの内容やカスタムバリデーションによる拡張も可能とのことで、今後も触ってみようと思います!
  • またこういった形でプラグイン等触ってみて良さそうなの見つけたら導入方法から発信していこうと思います!
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした