如何解决如何将yupvalidationSchema与react-hook-form一起使用?
我正在使用react-hook-form库和yup来验证输入字段:
const { handleSubmit,register,errors } = useForm({
mode: 'onBlur',validationSchema: Yup.object({
name: Yup.string().max(6,'Max 6 chars').required('Required boy'),pass: Yup.string().min(6,'Min 6 chars').required('Required boy')
})
});
const submit = (e) => {
alert(e.name + ' ' + e.pass);
};
return (
<div className="App">
<form onSubmit={handleSubmit(submit)}>
<input id="name" type="text" name="name" ref={register} />
{errors.name && <div>{errors.name.message}</div>}
<input id="pass" type="password" name="pass" ref={register} />
{errors.pass && <h3>{errors.pass.message}</h3>}
<button type="submit">Submit</button>
</form>
</div>
);
它不会在控制台中引发错误,并且当我单击“提交”按钮时会发出警报,但是验证根本不起作用。
我希望在触摸输入并且该值小于或大于所需值时显示错误消息。
我如何正确地将yup与react-hook-form配合使用?
解决方法
无需降级到4.9.8即可使用最新版本
文档是“带有解析器的自定义钩子”下的反应钩子形式的预先部分 https://react-hook-form.com/advanced-usage
我的示例代码如下: https://codesandbox.io/s/react-hook-form-yup-material-ui-8ino9
,通过安装版本4.9.8解决了该问题
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。