什么触发了 Formik 验证？

介绍

Formik 是一个用于管理 React 表单的库。在表单中，验证是必要的，以确保用户输入的数据是有效的。那么什么触发了 Formik 的验证呢？我们来一起探究一下。

代码片段

当用户操作表单组件时，Formik 会根据以下事件触发验证：

• input 元素 onChange 事件
• input 元素 onBlur 事件
• form 元素 onSubmit 事件

如果使用了 Yup 或其它验证库，还可以在这些事件中触发额外的验证操作。例如，在 input 的 onChange 事件中，可以进行实时验证。在 onBlur 事件中，则可以在用户离开这个 input 元素之前显示错误信息。

下面是一个简单的 Formik 表单组件示例，它展示了如何在 onChange 和 onBlur 事件触发验证：

import React from 'react';
import { useFormik } from 'formik';
import * as Yup from 'yup';

const validationSchema = Yup.object({
  name: Yup.string().required('请输入姓名'),
  email: Yup.string().email('请输入有效的邮箱').required('请输入邮箱'),
});

const MyForm = () => {
  const formik = useFormik({
    initialValues: {
      name: '',
      email: '',
    },
    validationSchema,
    onSubmit: values => {
      console.log(values);
    },
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <div>
        <label htmlFor="name">姓名：</label>
        <input id="name" type="text" {...formik.getFieldProps('name')} />
        {formik.touched.name && formik.errors.name ? (
          <div>{formik.errors.name}</div>
        ) : null}
      </div>
      <div>
        <label htmlFor="email">邮箱：</label>
        <input id="email" type="text" {...formik.getFieldProps('email')} />
        {formik.touched.email && formik.errors.email ? (
          <div>{formik.errors.email}</div>
        ) : null}
      </div>
      <button type="submit">提交</button>
    </form>
  );
};

结论

Formik 验证由用户操作表单组件的 onChange、onBlur 和 onSubmit 事件触发。此外，也可以在这些事件中触发额外的验证操作。开发人员可以使用 Yup 或其它验证库来构建自定义的验证 schema。