如何将 yup validationSchema 与 react-hook-form 一起使用？

Question

我正在使用 react-hook-form 库和是的来验证输入字段：

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>
    );

它不会在控制台中抛出错误，当我单击提交按钮时它会发出警报，但验证根本不起作用。

我希望在触摸输入且值小于或大于所需值时显示错误消息。

如何通过 react-hook-form 正确使用 yup？

Answer 1

通过安装版本 4.9.8 解决了问题

Answer 2

无需降级到4.9.8即可使用最新版本

文档是在“Custom Hook with Resolver”下的 react hook form 的预先部分 https://react-hook-form.com/advanced-usage

我的示例代码如下： https://codesandbox.io/s/react-hook-form-yup-material-ui-8ino9

如何将 yup validationSchema 与 react-hook-form 一起使用？

How can I use yup validationSchema with react-hook-form?

javascript

reactjs

yup

react-hook-form