v-formのProps

validate-on

blurやchangeを指定することで、バリデーションのタイミングを指定できます。

バリデーションの実装方法

required

入力必須のバリデーションの実装例です。

入力フォームに値が入力されていない場合、エラーメッセージを表示します。

First NameFirst Name

validation : false

Sample Code

template

<template>
  <v-form
    v-model="isValid"
  >
    <v-text-field
      v-model="name"
      :rules="[
        (v) => !!v || 'Name is required',
    ]"
    >
      <template v-slot:label>First Name</template>
    </v-text-field>
    validation : {{ isValid }}
  </v-form>
</template>

script

<script setup lang="ts">
import { ref } from 'vue';

const name = ref('');
const isValid = ref(false);
</script>

min/max

入力値の最小値、最大値を指定してバリデーションの実装例です。 入力フォームに指定した入力値よりも少ない文字数または多い文字数の場合、エラーメッセージを表示します。

First NameFirst Name

validation : false

Sample Code

template

<template>
  <v-form
    v-model="isValid"
  >
    <v-text-field
      v-model="name"
      :rules="[
        (v) => v.length <= 10 || 'Name must be less than 10 characters',
        (v) => v.length >= 3 || 'Name must be more than 3 characters',
    ]"
    >
      <template v-slot:label>First Name</template>
    </v-text-field>
    validation : {{ isValid }}
  </v-form>
</template>

script

<script setup lang="ts">
import { ref } from 'vue';

const name = ref('');
const isValid = ref(false);
</script>

イベントタイミングでのバリデーション

v-formのvalidateメソッドを使用して、イベントタイミングでバリデーションを行う方法です。

入力途中での送信時など、イベントタイミングでバリデーションを行いたい場合に使用できます。

サンプルでは、イベントタイミングでバリデーションが実行されるようにvalidate-onはblurを指定しています。

First NameFirst Name

validation : false

Sample Code

template

<template>
  <v-form
    v-model="isValid"
    ref="form"
    validate-on="blur"
  >
    <v-text-field
      v-model="name"
      :rules="[
        (v) => !!v || 'Name is required',
    ]"
    >
      <template v-slot:label>First Name</template>
    </v-text-field>
    <v-btn @click="validateForm">Validate</v-btn>
  </v-form>
  validation : {{ isValid }}
</template>

script

<script setup lang="ts">
import { ref } from 'vue';

const name = ref('');
const isValid = ref(false);
const form = ref();

const validateForm = () => {
  form.value.validate();
}
</script>