使用 Formik 和 Yup 键入时验证用户名是否已存在

Question

我的公司有一项任务，我必须显示用户名是否被占用，我使用 formik 和 yup 验证进行检查，所以暂时我在 yup 验证中添加了一个自定义测试功能，该功能显示用户名是否被使用单击提交按钮是否被采用，但是，我最初的任务是在用户输入用户名时动态显示错误消息，它应该告诉他用户名是否被采用。\n我明白我可能必须操作formik的默认handleChange，但我\xe2\x80\x99m无法这样做。\n非常感谢任何帮助！

\n

         validationSchema: Yup.object({\n            name: Yup.string()\n                .min(2, "Mininum 2 characters")\n                .max(30, "Maximum 30 characters")\n                .required("Your name is required"),\n            email: Yup.string()\n                .email("Invalid email format")\n                .test("email", "This email has already been registered", function (email) {\n                        return checkAvailabilityEmail(email);\n                })\n                .required("Your email is required"),\n            username: Yup.string()\n                .min(1, "Mininum 1 characters")\n                .max(15, "Maximum 15 characters")\n                .test("username", "This username has already been taken", function (username) {\n                        return checkAvailabilityUsername(username);\n                })\n                .required("You must enter a username"),\n

\n

Answer 1

在您的验证模式中，只需添加 Yup 中找到的测试函数即可。是的，还支持异步/等待！

无论如何，为了回答你的问题，这是我的例子：

validationSchema: Yup.object({
        email: Yup.string()
            .min(8, 'Must be at least 8 characters')
            .max(20, 'Must be less  than 20 characters')
            .required('Email is required')
            .test('Unique Email', 'Email already in use', // <- key, message
                function (value) {
                    return new Promise((resolve, reject) => {
                        axios.get(`http://localhost:8003/api/u/user/${value}/available`)
                            .then((res) => {
                                resolve(true)
                            })
                            .catch((error) => {
                                if (error.response.data.content === "The email has already been taken.") {
                                    resolve(false);
                                }
                            })
                    })
                }
            ),
    }),

电子邮件的值被传递并调用到数据库，数据库返回响应对象。如果响应对象是错误并且错误内容匹配，则会解析为 false 并显示消息'Email already in use'。

编辑：如果您不想在每次击键时进行验证，您可以传入一些道具，特别是 validateOnChange={false} 或 ValidateOnBlur={false}。这可以帮助改善性能问题并减少对后端的 API 调用！

            <Formik
              initialValues={{
                firstName: '',
                lastName: '',
                email: '',
              }}
              validationSchema={validationSchema}
              validateOnChange={false} // disable on every keystroke
              ...
            >

要相应地显示错误消息：

{(errors.email && touched.email) && <span style={{ color: 'red', fontSize: '0.8rem', marginLeft: '1.5rem' }}>{errors.email}</span>}