1. ホーム
  2. javascript

[解決済み] yupとformikを使ったパスワードバリデーション

2022-02-12 20:42:10

質問内容

パスワードの検証を行いながら、同時にエラーを別の変数に渡すにはどうしたらよいでしょうか?

すなわち

password: Yup.string().required("Please provide a valid password"),
passwordMin: Yup.string().oneOf([Yup.ref('password'), null]).min(8, 'Error'),
passwordLC: Yup.string().oneOf([Yup.ref('password'), null]).matches(/[a-z]/, "Error" )
passwordUC: Yup.string().oneOf([Yup.ref('password'), null]).matches(/[A-Z]/, "Error" )

パスワード変数とパスワードオブジェクトのバインディングがうまくいきません。

どうすればいいですか?

efleurineさんの回答について詳しく説明します。
各バリデーションを同じフィールドに保存する必要はありません。完全なバリデーションを得るために、それらを連結することができます。

password: Yup.string()
  .required('No password provided.') 
  .min(8, 'Password is too short - should be 8 chars minimum.')
  .matches(/[a-zA-Z]/, 'Password can only contain Latin letters.')

この場合でも、各失敗に対して個別のメッセージを指定することができることに注意してください。
また、バインドが機能するように、バインド先のフォーム入力に適切な name 属性 - この場合 password .