Formik是一个用于构建React表单的开源库,它简化了表单处理的复杂性。Yup是一个用于JavaScript对象模式验证的库,它提供了一种简单且强大的方式来定义和验证对象的结构。
在Formik中使用Yup验证,可以通过在表单字段上定义验证规则来确保用户输入的数据符合预期。对于允许数组中的特定对象的验证,可以使用Yup的array
方法结合of
方法来定义数组的结构,并使用shape
方法定义特定对象的结构。
以下是一个示例代码,演示了如何在Formik中使用Yup验证允许数组中的特定对象:
import React from 'react';
import { Formik, Field, Form, ErrorMessage } from 'formik';
import * as Yup from 'yup';
const validationSchema = Yup.object().shape({
items: Yup.array().of(
Yup.object().shape({
name: Yup.string().required('名称是必填项'),
quantity: Yup.number().required('数量是必填项').positive('数量必须是正数'),
})
),
});
const initialValues = {
items: [
{ name: '', quantity: 0 },
{ name: '', quantity: 0 },
],
};
const App = () => {
const handleSubmit = (values) => {
// 处理表单提交逻辑
console.log(values);
};
return (
<Formik
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={handleSubmit}
>
<Form>
<FieldArray name="items">
{({ push, remove }) => (
<div>
{values.items.map((item, index) => (
<div key={index}>
<Field name={`items[${index}].name`} />
<ErrorMessage name={`items[${index}].name`} component="div" />
<Field name={`items[${index}].quantity`} type="number" />
<ErrorMessage name={`items[${index}].quantity`} component="div" />
<button type="button" onClick={() => remove(index)}>
删除
</button>
</div>
))}
<button type="button" onClick={() => push({ name: '', quantity: 0 })}>
添加
</button>
</div>
)}
</FieldArray>
<button type="submit">提交</button>
</Form>
</Formik>
);
};
export default App;
在上述代码中,我们首先定义了一个validationSchema
,其中使用了Yup的array
方法和of
方法来验证items
数组中的每个对象。每个对象都需要包含name
和quantity
字段,分别使用string
和number
方法进行验证。
然后,我们在Formik
组件中使用了validationSchema
来进行表单验证。在表单的渲染部分,我们使用了FieldArray
组件来处理items
数组的动态添加和删除。通过map
方法遍历items
数组,并使用Field
组件和ErrorMessage
组件来渲染每个对象的字段和错误信息。
最后,我们在表单的提交按钮上绑定了handleSubmit
函数,用于处理表单的提交逻辑。
这是一个简单的示例,演示了如何在Formik中使用Yup验证允许数组中的特定对象。根据实际需求,你可以根据Yup的文档进一步了解其更多功能和用法。
腾讯云相关产品和产品介绍链接地址:
请注意,以上链接仅供参考,具体产品选择应根据实际需求和项目要求进行评估。
领取专属 10元无门槛券
手把手带您无忧上云