react-hook-form 验证密码匹配（失败）

Question

我正在使用 react-hook-form 来验证我的密码和确认密码是否相同。出于某种原因，表单元素未通过验证。我用 console.log 确认参考密码和确认密码相同，但无论如何都失败了。一切都很好，我哪里错了？

代码

const { setValue, register, getValues, handleSubmit, watch, formState: { errors } } = useForm();

const password = useRef({});

password.current = watch("password", "");

const selectType = watch("type", '');

<IonItem >
     <IonLabel position="floating">Password</IonLabel>
     <IonInput type="password" {...register("password", { required: 'Password is required' })}/>
</IonItem>

                            
 <IonItem >
      <IonLabel position="floating">Confirm Password</IonLabel>
      <IonInput type="password" {...register("password_repeat", { validate: value => value === password.current || "The passwords do not match" })}/>
 </IonItem>

Answer 1

问题是 <IonInput /> 的界面与 register 期望的界面不同。随着 register 的传播，您正在链接一个 onChange 处理程序来更新该字段的 RHF 表单状态。 <IonInput /> 使用名为 ionChange 的更改处理程序。

根据经验，在使用 external controlled components 时，您应该使用 RHF 的 <Controller />。

const { control, handleSubmit, watch, formState: { errors } } = useForm();

const password = watch("password", "");

<Controller
  control={control}
  name="password"
  rules={{ required: "Password is required" }}
  render={({ field }) => (
    <IonItem>
      <IonLabel position="floating">Password</IonLabel>
      <IonInput
        value={field.value}
        ionChange={field.onChange}
        ionBlur={field.onBlur}
        onFocus={field.onFocus}
        ref={field.ref}
        type="password"
      />
    </IonItem>
  )}
/>

<Controller
  control={control}
  name="password_repeat"
  rules={{
    required: "Password is required",
    validate: (value) =>
      value === password|| "The passwords do not match"
  }}
  render={({ field }) => (
    <IonItem>
      <IonLabel position="floating">Password</IonLabel>
      <IonInput
        value={field.value}
        ionChange={field.onChange}
        ionBlur={field.onBlur}
        onFocus={field.onFocus}
        ref={field.ref}
        type="password"
      />
    </IonItem>
  )}
/>

react-hook-form 验证密码匹配（失败）

react-hook-form validate that password match (failing)

react-hook-form