首页 > 解决方案 > react hook 表单中的表单验证

问题描述

我正在使用 yup 和 react hook form 创建一个表单。问题是发送表单时触发了错误,但我希望在输入字段时触发这是一些代码:

<Controller name="email"
  control={control}
  defaultValue=""
  render={({field}) => (
    <Input {...field} name={field.name}                                                   placeholder="email"/>
  )}
/>
  {errors.email && <span>{errors.email.message}</span>}
  <Controller name="confirmation_email"
                        ... />}
    />
    
    email: yup.string().email(format_email).required(champs_obligatoire),
    confirmation_email: yup.string()
            .oneOf([yup.ref('email'), null], 'Emails must match').required(champs_obligatoire),
    
    
    <form onSubmit={handleSubmit(onSubmit)}>
          <MyForm errors={errors} control={control} t={t}/>
          <Button type="submit" variant="contained">
            Envoyer
          </Button>
    </form> 

此代码来自 3 个文件:表单和服务,提前感谢您的帮助。请我需要一个详细的解释,因为我是反应世界的新手。

标签: reactjsformsreact-hooksyup

解决方案


推荐阅读