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

Question

我的公司有一项任务，我必须显示是否使用了用户名，我正在使用 formik 和 yup 验证进行检查，因此目前我已向 yup 验证添加了自定义测试功能，以显示用户名单击提交按钮时是否被采用，但是，我的原始任务是在用户输入用户名时动态显示错误消息，它应该告诉他用户名是否被采用。
我知道我可能必须操纵 formik 的默认 handleChange，但我无法这样做。
任何帮助都非常感谢!!!

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

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并显示消息， '电子邮件已在使用中' .
编辑:如果您不想在每次击键时都进行验证，您可以传入一些 Prop ，特别是 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>}