Javascript

よく使うYup バリデーション(validation)一覧

よく使うYupバリデーション一覧画像

VueやReactなどでバリエーションチェックを行う際に、Yupというライブラリを使って実装することがあると思います。

今回はよく使うYup バリデーションをまとめます。

バージョン

"yup": "^0.32.11"

string (文字列系)

最大の文字数を指定する

以下の場合、30文字以下で入力しないと、エラーになります。

yup.string().max(30)
yup.string().max(30, "30文字以下で入力してください")

最小の文字数を指定する

以下の場合、10文字以上でで入力しないと、エラーになります。

yup.string().min(10)
yup.string().min(10, "10文字以上で入力してください")

入力を必須にする

以下の場合、入力を必須にします。

yup.string().required()
yup.string().required("入力は必須です")

メールアドレス

以下の場合、「test@test.com」のようにメールアドレスの形式でないと、エラーになります。

yup.string().email()
yup.string().email("正しい形式のメールアドレスを指定してください")

URL

以下の場合、URLの形式でないと、エラーになります

yup.string().url()
yup.string().url("正しい形式でurlを指定してください")

正規表現

第一引数は正規表現を指定します。以下の場合、「0」ではない場合、エラーになります。

yup.string().matches(/^(?!0)/, { message: "*0以外を選択してください。" }),

number (数字系)

数字のみを指定する

以下の場合、数字のみ入力可能にして、文字列の場合はエラーになります。
typeErrorをつけることにより、エラーメッセージを指定できます。

yup.number()
yup.number().typeError("数字を入力してください")

最大の数字を指定する

以下の場合、3以下の数字でないとエラーになります。1,2,3はOKですが、4や5はエラーです。

yup.number().max(3)
yup.number().max(3, "3以下で入力してください")

最小の数字を指定する

以下の場合、3以上の数字でないとエラーになります。1,2はエラーですが、3,4,5はOKです。

yup.number().min(3)
yup.number().min(3, "3以上で入力してください")

numberで、nullを許容したい

以下の場合、numberだけどnullも許容します。(参考)

yup
.number().nullable()
.transform((value, originalValue) =>
  String(originalValue).trim() === '' ? null : value
)

正の数のみ許容する

以下の場合、正の数のみを許容します。-1などはエラーになります。

yup.number().positive()
yup.number().positive("正の数で入力してください")

整数のみ許容する

以下の場合、整数のみを許容します。1.5などはエラーになります。

yup.number().integer()
yup.number().integer("整数で入力してください")

mixed

AかBのどちらかを許容

以下の場合、AかBのどちらかを許容します。AかBでない場合、エラーになります。
セレクトボックスやラジオボタンなどに、よく使うと思います。

yup().mixed().oneOf(['A', 'B'])
yup().mixed().oneOf(['A', 'B'], "AかBを選択してください")

以上です。
また使いそうなバリデーションがあれば、追加していきます。

-Javascript
-, ,