Yup (使用formik和react) -无法验证数组长度

Yup是一个JavaScript库，用于在前端开发中进行表单验证。它通常与React和Formik一起使用，可以帮助开发者轻松地验证表单数据并提供错误信息。

Yup的特点和优势包括：

声明式验证：Yup提供了一种声明式的验证语法，可以使用链式调用来定义验证规则。这使得验证逻辑清晰易懂，代码可读性高。
强大的验证规则：Yup支持多种内置的验证规则，例如必填字段、最小/最大长度、正则表达式匹配、类型检查等。开发者可以根据需求组合这些规则，满足不同的验证需求。
异步验证支持：对于需要进行异步验证的场景，Yup也提供了相应的机制。开发者可以定义异步验证函数，用于向服务器发送请求或执行其他异步操作，并根据返回结果进行验证。
客户端和服务器端一致性：Yup的验证规则可以在客户端和服务器端共享，保证了验证逻辑的一致性。这样，在前后端分离的开发模式中，可以有效减少重复的验证工作。

对于使用Yup进行数组长度验证的场景，可以按照以下步骤进行操作：

安装和导入Yup：首先，在项目中安装Yup库，并将其导入到需要进行表单验证的组件文件中。
创建验证模式：使用Yup的验证规则，可以创建一个验证模式来验证数组的长度。可以使用array规则指定验证对象为数组，并使用min和max规则限制数组的最小和最大长度。
应用验证模式：将验证模式应用到表单中需要验证的字段上。在使用Formik构建表单时，可以使用yup.object().shape()方法将验证模式与表单字段进行关联。

以下是一个示例代码，展示了如何使用Yup验证数组长度：

import * as Yup from 'yup';

// 创建验证模式
const schema = Yup.object().shape({
  myArray: Yup.array().min(3, '数组长度不能少于3').max(5, '数组长度不能超过5'),
});

// 应用验证模式
const MyForm = () => (
  <Formik
    initialValues={{ myArray: [] }}
    validationSchema={schema}
    onSubmit={(values) => {
      // 提交表单数据
    }}
  >
    {({ errors, touched }) => (
      <Form>
        <FieldArray name="myArray">
          {({ push, remove }) => (
            <div>
              {values.myArray.map((_, index) => (
                <div key={index}>
                  <Field name={`myArray.${index}`} />
                  <button type="button" onClick={() => remove(index)}>
                    删除
                  </button>
                </div>
              ))}
              <button type="button" onClick={() => push('')}>
                添加
              </button>
            </div>
          )}
        </FieldArray>
        {errors.myArray && touched.myArray && (
          <div>{errors.myArray}</div>
        )}
        <button type="submit">提交</button>
      </Form>
    )}
  </Formik>
);

上述示例中，我们通过创建一个验证模式，限制了myArray字段的最小长度为3，最大长度为5。在表单提交时，Yup会自动进行验证，并在出现错误时提供错误信息。

腾讯云提供的相关产品和文档链接如下：