如何使用反应挂钩表单验证密码和确认密码，是的

Question

const formOption = {
 config = [

      {
        label: 'Password',
        name: 'password',
        type: 'password',
        rules: yup.string().required()
      },
      {
        label: 'Confirm password',
        name: 'confirmpass',
        type: 'password',
        rules: yup.string().required()
      }
    ]
}

当使用反应钩子和是的密码不相等时，如何验证密码和确认密码？

因为我想做的是在确认密码不等于密码时添加验证。

Answer 1

您可以像这样使用 test() API

const formOption = {
 config = [

      {
        label: 'Password',
        name: 'password',
        type: 'password',
        rules: yup.string().required()
      },
      {
        label: 'Confirm password',
        name: 'confirmpass',
        type: 'password',
        rules: yup
                .string()
                .required()
                .test(
                 'passwords-match', 
                 'Passwords must match', 
                 (value) => this.parent.password === value)
                )
      }
    ]
}

见doc

Answer 2

您可以单独使用反应挂钩表单来完成此操作。您可以使用反应挂钩形式的 watch 来完成此操作。这使您可以监听密码字段中的更改，您可以在确认密码验证方法中使用它来将密码与确认密码字段值进行比较，如下所示；

const {register, watch} = useForm();
<input
 {...register("password", {
  required: true
 })}
/>
<input
 {...register("confirm_password", {
  required: true,
  validate: (val: string) => {
    if (watch('password') != val) {
      return "Your passwords do no match";
    }
  },
 })}
/>

复制粘贴我在

的回答

如何使用反应挂钩表单验证密码和确认密码，是的

How to validate the password and confirm password using the react hook form and yup

reactjs

next.js

yup

react-hook-form