react-hook-form 验证密码匹配(失败)
react-hook-form validate that password match (failing)
我正在使用 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>
问题是 <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 来验证我的密码和确认密码是否相同。出于某种原因,表单元素未通过验证。我用 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>
问题是 <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>
)}
/>