【Vue,Vuetify】formのバリデーションチェック

Vueのformでのバリデーションチェックの仕方

• 基本的なバリデーションの実装
  Vuetifyでは、rulesプロパティにバリデーション関数を設定することで、入力値のチェックを行うことができます。例えば、必須入力のバリデーションは以下のように定義できます。

<v-text-field
  label="項目"
  v-model="form.itemName"
  :rules="[requiredValidation, limitLengthValidation]"
  :counter="maxLength"
></v-text-field>

バリデーション関数はdata内で定義します。

data() {
  const maxLength = 64;
  return {
    maxLength,
    requiredValidation: (value) => !!value || '必ず入力してください',
    limitLengthValidation: (value) =>
      !value || value.length <= maxLength || `${maxLength}文字以内で入力してください`,
  };
}

• URLのバリデーション
  URL入力欄では、文字数制限と正規表現を使ったバリデーションを組み合わせることができます。

<v-text-field
  label="URL"
  v-model="form.link"
  :rules="[limitUrlLengthValidation, urlPatternValidation]"
  counter="1024"
></v-text-field>

data() {
  return {
    limitUrlLengthValidation: (value) =>
      !value || value.length <= 1024 || `1024文字以内で入力してください`,
    urlPatternValidation: (value) =>
      !value || value.match(/^https?:\/\/[\w!?/+\-_~;.,*&@#$%()'[\]]+/) || 'URLを入力してください',
  };
}

rulesプロパティを活用することで、簡単にバリデーションを実装できます。
必須チェック、文字数制限、正規表現チェックを組み合わせることで柔軟なバリデーションが可能になります。