【TypeScript】yup のカスタムバリデータを追加する

yup でカスタムバリデータを追加する方法です。

サンプルとして「日付っぽい文字列かどうか」のバリデータを追加しました。 Dateライブラリには dayjs を利用しています。

import * as yup from 'yup';
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';

dayjs.extend(customParseFormat);

// 型定義
declare module 'yup' {
  interface StringSchema {
    dateLike(format?: string): StringSchema;
  }
}

// カスタムバリデータ
yup.addMethod(yup.string, 'dateLike', function (format = 'YYYY/MM/DD') {
  return this.test({
    name: 'dateLike', // 任意の名称
    message: '正しい日付を入力してください',
    test: (value) => value === '' ? true : dayjs(value, format, true).isValid(),
  });
});

export default yup;

入力された文字列が、事前に受け取ったフォーマットに適合しているかどうかを判定します。不適合なら 正しい日付を入力してください エラーになります。

ちなみに、空文字の場合は always true です。必須チェックをするなら、利用側で .required() をチェーン呼び出しするのが良いと思います。

利用側はこのような感じ。

const schema = yup.object({
    start_at: yup.string().dateLike('YYYY/M/D'),
    end_at: yup.string().dateLike('YYYY/M/D'),
  })

あとは、 React Hook Form などに渡して、ビュー側で利用できます。