让您的React表单操作如丝般顺滑：Formik与Yup的强强联合

前端

2023-11-05 23:42:59

起航：告别表单烦恼

在React的世界中，表单是无处不在的基本元素。然而，构建表单并不总是那么容易，尤其是当您需要处理复杂的验证规则时。这时，我们需要两个强大的工具：Formik和Yup。

Formik是一个旨在简化React表单开发和管理的库。它提供了一整套工具，包括表单状态管理、验证、错误处理等。

而Yup是一个专注于对象模式的表单验证库。它可以帮助您轻松定义验证规则，并提供清晰易懂的错误信息。

初识Formik：表单管理利器

Formik提供了直观且便捷的表单状态管理方式。它使您可以轻松处理表单字段的值、验证状态以及错误信息。

Formik的核心概念是“表单状态”。表单状态包含了所有与表单相关的信息，包括字段值、验证状态和错误信息。Formik通过一个名为“useFormik”的钩子函数来管理表单状态。

const { useFormik } = require('formik');

const MyForm = () => {
  const formik = useFormik({
    initialValues: {
      name: '',
      email: '',
    },
    validationSchema: Yup.object({
      name: Yup.string()
        .required('姓名不能为空')
        .min(3, '姓名至少需要3个字符'),
      email: Yup.string()
        .required('邮箱不能为空')
        .email('邮箱格式不正确'),
    }),
    onSubmit: (values) => {
      // 表单提交时执行的操作
    },
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <label htmlFor="name">姓名</label>
      <input
        id="name"
        name="name"
        type="text"
        value={formik.values.name}
        onChange={formik.handleChange}
        onBlur={formik.handleBlur}
      />
      {formik.touched.name && formik.errors.name && (
        <div className="error">{formik.errors.name}</div>
      )}

      <label htmlFor="email">邮箱</label>
      <input
        id="email"
        name="email"
        type="email"
        value={formik.values.email}
        onChange={formik.handleChange}
        onBlur={formik.handleBlur}
      />
      {formik.touched.email && formik.errors.email && (
        <div className="error">{formik.errors.email}</div>
      )}

      <button type="submit">提交</button>
    </form>
  );
};

export default MyForm;

在上面的代码中，我们首先使用useFormik钩子创建了一个Formik实例，并为其指定了初始值和验证规则。然后，我们在表单中使用<input>元素来获取用户输入，并使用value和onChange属性将它们绑定到Formik实例中。

当用户输入数据时，Formik会自动对其进行验证。如果输入不符合验证规则，Formik会自动在表单中显示错误信息。

携手Yup：验证规则的艺术

Yup是一个强大的表单验证库，它提供了丰富的验证规则，包括必填项、长度限制、正则表达式验证等。

我们可以使用Yup的object()方法来创建验证规则对象，然后将它传递给Formik实例的validationSchema属性。

const validationSchema = Yup.object({
  name: Yup.string()
    .required('姓名不能为空')
    .min(3, '姓名至少需要3个字符'),
  email: Yup.string()
    .required('邮箱不能为空')
    .email('邮箱格式不正确'),
});

在上面的代码中，我们定义了一个验证规则对象，它包含了两个字段的验证规则：