,可以通过以下步骤实现:
string()
方法来验证一个字符串字段。import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';
const validationSchema = Yup.object().shape({
name: Yup.string().required('姓名是必填项'),
email: Yup.string().email('请输入有效的电子邮件地址').required('电子邮件是必填项'),
});
<Formik
initialValues={{ name: '', email: '' }}
validationSchema={validationSchema}
onSubmit={(values, { setSubmitting }) => {
// 处理表单提交逻辑
// 可以在这里发起API请求并处理错误
setSubmitting(false);
}}
>
{({ isSubmitting }) => (
<Form>
<div>
<label htmlFor="name">姓名</label>
<Field type="text" name="name" />
<ErrorMessage name="name" component="div" />
</div>
<div>
<label htmlFor="email">电子邮件</label>
<Field type="email" name="email" />
<ErrorMessage name="email" component="div" />
</div>
<button type="submit" disabled={isSubmitting}>
提交
</button>
</Form>
)}
</Formik>
这样,当API返回错误时,你可以在表单提交处理函数中处理该错误,并将错误信息设置到表单字段的错误状态中,Formik会自动显示相应的错误消息。
对于腾讯云相关产品和产品介绍链接地址,可以根据具体需求选择适合的产品。腾讯云提供了丰富的云计算服务,包括云服务器、云数据库、云存储等。你可以访问腾讯云官方网站(https://cloud.tencent.com/)了解更多详情。
领取专属 10元无门槛券
手把手带您无忧上云