在使用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中的测试函数。Yup还支持async/await！

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

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，并显示消息"邮件已在使用中"。

编辑：如果您不想在每次击键时进行验证，可以传入一些道具，特别是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>}