React + Formik (Yup) -提交时验证错误

React是一个用于构建用户界面的JavaScript库，它提供了一种声明式的编程模型，可以高效地创建交互式的UI组件。Formik是一个用于处理表单的React库，它简化了表单的状态管理和验证过程。Yup是一个用于数据验证的JavaScript库，它可以与Formik一起使用，提供了强大的验证功能。

在React + Formik (Yup)中，可以通过以下步骤实现提交时的验证错误处理：

安装依赖：首先，需要安装React、Formik和Yup。可以使用npm或yarn进行安装。
创建表单组件：使用React创建一个表单组件，并在其中定义表单的结构和字段。
引入Formik和Yup：在表单组件中引入Formik和Yup，并使用它们提供的相关函数和组件。
定义表单验证规则：使用Yup定义表单字段的验证规则。可以验证字段的必填性、格式、长度等。
添加表单验证：在表单组件中使用Formik提供的<Formik>组件包裹整个表单，并将验证规则传递给validationSchema属性。
处理提交事件：在表单组件中定义一个处理提交事件的函数，并将其传递给Formik的onSubmit属性。
显示验证错误：在表单组件中使用Formik提供的<ErrorMessage>组件来显示验证错误信息。

下面是一个示例代码：

import React from 'react';
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('邮箱不能为空'),
});

const MyForm = () => {
  const handleSubmit = (values, { setSubmitting }) => {
    // 处理表单提交事件
    console.log(values);
    setSubmitting(false);
  };

  return (
    <Formik
      initialValues={{ name: '', email: '' }}
      validationSchema={validationSchema}
      onSubmit={handleSubmit}
    >
      <Form>
        <div>
          <label htmlFor="name">姓名：</label>
          <Field type="text" id="name" name="name" />
          <ErrorMessage name="name" component="div" />
        </div>
        <div>
          <label htmlFor="email">邮箱：</label>
          <Field type="email" id="email" name="email" />
          <ErrorMessage name="email" component="div" />
        </div>
        <button type="submit">提交</button>
      </Form>
    </Formik>
  );
};

export default MyForm;

在上面的示例中，我们创建了一个简单的表单，包含了姓名和邮箱两个字段。使用Yup定义了字段的验证规则，如必填性和格式要求。在表单组件中，使用Formik的<Formik>组件包裹整个表单，并将验证规则传递给validationSchema属性。在<Field>组件中定义了表单字段的输入框，并使用<ErrorMessage>组件来显示验证错误信息。在提交事件处理函数中，可以对表单数据进行处理，例如打印到控制台。

这里推荐腾讯云的云产品：云开发。云开发是腾讯云提供的一站式后端云服务，可以帮助开发者快速搭建云端应用。它提供了云函数、数据库、存储、云托管等功能，可以方便地与前端开发进行集成，实现全栈开发。