Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
14
Help us understand the problem. What is going on with this article?
@fussy113

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

More than 1 year has passed since last update.
  • 個人で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 指定した間の数値に制限する

  • 導入がすんなり出来てルールも豊富なので非常に使い勝手が良いと感じました!
  • エラーメッセージの内容やカスタムバリデーションによる拡張も可能とのことで、今後も触ってみようと思います!
  • またこういった形でプラグイン等触ってみて良さそうなの見つけたら導入方法から発信していこうと思います!
14
Help us understand the problem. What is going on with this article?
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
fussy113
朱夏人です、全速前進よーそろー。
increments
「エンジニアを最高に幸せにする」ために Qiita、Qiita Team、Qiita Jobs を開発・運営しています。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
14
Help us understand the problem. What is going on with this article?