くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

トップ > VeeValidate > VeeValidateで開始日/終了日のバリデーションをチェックする

VeeValidateで開始日/終了日のバリデーションをチェックする

VeeValidate Vue.js Nuxt.js

NuxtアプリのバリデーションにはVeeValidateを使っているけど、
開始日/終了日みたいな相関チェックをしたいなと思ったときの備忘録。

v2だとあるようだけど、v3だとなくなってしまったぽい。。(´・ω・｀)

HTML

HTMLだとこんな感じ。
追加するルールはafter:@開始日で指定。

<ValidationObserver>
  <ValidationProvider rules="require" name="開始日" v-slot="{ errors }">
    <input type="date" />
    <span>{{ errors[0] }}</span>
  </ValidationProvider>

  <ValidationProvider rules="after:@開始日" name="終了日" v-slot="{ errors }">
    <input type="date" />
    <span>{{ errors[0] }}</span>
  </ValidationProvider>
</ValidationObserver>

カスタムバリデーション

公式ドキュメントでは、Cross Field Validationをみるといい感じ。
・Cross Field Validation | VeeValidate

import dayjs from "dayjs";
import { extend, ValidationObserver, ValidationProvider } from "vee-validate";

extend("required", required);

extend("after", {
  params: ["target"],
  validate: (value, params) => {
    const target = params["target"];
    const date1 = dayjs(value);
    const date2 = dayjs(target);
    if (!date1 || !date2) return false;
    return date1.isAfter(date2);
  },
  message: "{_field_}は、{target}よりあとの日付を入力ください"
});

Vue.component("ValidationProvider", ValidationProvider);
Vue.component("ValidationObserver", ValidationObserver);

{_field_}には、rulesを使っているname(=終了日)が設定され、
{target}には、ターゲットに設定しているフィールドのname(=開始日)が設定される。

終了日は、開始日よりあとの日付を入力くださいという感じになる。

以上!!

参考にしたサイトさま