Formik Yup验证:允许数组中的特定对象

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的文档进一步了解其更多功能和用法。

腾讯云相关产品和产品介绍链接地址：