hiro08gh

ソフトウェアに関すること

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

Reactのアプリケーションでフォームのバリデーションを行い時はyupを使っています。yupはフォームのバリデーションを簡単に入れることができます。特にformikと相性が良く、私もフォーム処理にはformik + yupで行なっています。今回正規表現の入れ方に少し戸惑ったので、メモがわりの記事です。
github.com

yupにmatchesというapiが用意されているので、.matches(regex, { message: ""})という形で書きます。

例:英数字のみを通す正規表現
export const RegexScheme = Yup.object().shape({
 text: Yup.string()
   .matches(/^[a-zA-Z0-9]+$/, { message: '文字列が有効ではありません' })
});