reactjs - 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 个文件:表单和服务,提前感谢您的帮助。请我需要一个详细的解释,因为我是反应世界的新手。
解决方案
推荐阅读
- syntax - 使用 Python shutil.copy 覆盖文件会出现语法错误
- java - 试图在 groovy 中编写一个通用的枚举工具类
- php - 从 csv 文件创建页面
- json - Angular:将 httpClient Json 列表响应映射到 Typescript 类
- grpc - 为什么术语存根用于 RPC?
- python-3.x - 如何在机器人框架中遍历 Excel 工作表的所有行
- go - 问:如何使用 Expression Builder 对 DynamoDB 上的特定数组索引执行 ADD 操作
- r - R创建一个新变量,这是其他几个变量的平均值
- c - realloc 导致“双重释放或损坏(fasttop)”错误
- .net - 编译到 AnyCPU 是如何实际生成可执行代码的?