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を選択してください")以上です。
また使いそうなバリデーションがあれば、追加していきます。