Vue.js / Nuxt.js

【Nuxt.js】Vuetifyでフォームバリデーション

ふぐ

Nuxt.jsのプロジェクトで、Vuetifyを使用して
フォームバリデーションをしてみたときのメモ

ポイント
  1. <v-form>を利用する
  2. dataでバリデーションチェック内容 (rulesとする)を定義する
  3. 各入力項目の:rules に上で定義したルールを配列で指定する
  4. 送信時にバリデーションチェックを行う

コード

<template>
  <v-form ref="form" lazy-validation>
    <v-text-field
        v-model="form.name"
        label="お名前 (*)"
        :rules="[rules.required]"
    >
    </v-text-field>
    <v-text-field
        v-model="form.email"
        label="メールアドレス (*)"
        :rules="[rules.required, rules.email]"
    >
    </v-text-field>
    <v-text-field
        v-model="form.tel"
        label="電話番号 (*)"
        :rules="[rules.required, rules.tel]"
    >
    <v-textarea
        v-model="form.note"
        label="備考"
        :rules="[rules.max]"
　　     counter="100"
    ></v-textarea>
    
    <v-btn @click=submit>送信する</v-btn>
  </v-form>
    </v-row>
  </v-container>
</template>

<script>
export default {
  mounted() {
    // バリデーションをリセット
    this.$refs.form.resetValidation()
  },
  data () {
    return {
      form: {
        name: "",
        email: "",
        tel: "",
        note: "",
      },
      valid: true,
      rules: {
        required: value => !!value || '入力してください',
        email: value => /.+@.+\\..+/.test(value) || 'メールアドレスの形式が正しくありません',
        tel: value => /^(0[5-9]0[0-9]{8}|0[1-9][1-9][0-9]{7})$/.test(value.replace(/[━.*‐.*―.*－.*\-.*ー.*\-]/gi, ''))|| '電話番号の形式が正しくありません',
        max: value => (value && value.length <= 100) || '100文字以下で入力してください',
      },
    }
  },
  methods: {
    submit () {
      // バリデーションチェック
      if(this.$refs.form.validate()) {
        // 送信処理
        // (...省略)
        // 入力値を初期化する
        this.$refs.form.reset()
      }
    },
  },
}
</script>

補足
  • <v-form>にアクセスするため、ref属性で名前をつけること
    • 例えば <v-form ref="form1"> の場合、
      this.$refs.form1でアクセスできる
  • submitメソッドのthis.$refs.form.validate()がtrueの場合、送信処理が走る

\ 案件のご依頼・ご相談はこちらから /