yup

バリデーションライブラリ

react-hook-formやformikなどのform系ライブラリと併用して扱うとバリデーションがキレイに書ける

バリデーションの書き方は、以下のように書く（案件のコードをそのまま記述）

code:ts

import { ERROR_MESSAGE } from 'constant';

import * as yup from 'yup';

export const errorScheme = yup.object().shape({

nickname: yup

.string()

.required('必須項目のため入力してくだい')

.min(4, '4文字以上入力して下さい')

.max(25, '25文字以下で入力してください'),

// nullableの場合は、以下のように記述

◯◯: yup.mixed().nullable().◯◯

});

あとは、react-hook-formで利用する場合、下記の様に書くだけ

code:ts

import { yupResolver } from '@hookform/resolvers/yup';

import { useForm } from 'react-hook-form';

import { errorScheme } from './errorScheme'

const {

register,

formState: { errors },

} = useForm<SubmitDataArgumentType>({

mode: 'onSubmit',

criteriaMode: 'all',

shouldFocusError: false,

resolver: yupResolver(errorScheme), // resolverを使用

});

... 省略 ...

<Input

errorMessage={errors.nickname?.message}

/>

正規表現系のバリデーションを記述する場合

code:ts

.matches(

'半角英数字記号( -_ )を入力してください'

)

参考

yupでフォームのバリデーションに正規表現を追加したい