使用 Formik 和 Yup 进行 ReactJS 表单验证

在 ReactJS 应用程序中，我们通常需要对表单进行验证，以确保用户输入数据的有效性和正确性。使用 Formik 和 Yup 库可以让表单验证变得更加容易和简单。

Formik

Formik 是一个功能强大且灵活的 React 表单库，它提供了许多实用的功能，包括：

• 组件状态管理
• 表单值管理
• 表单提交处理
• 表单错误处理
• 与第三方表单库的集成

Formik 可以帮助我们处理表单状态，处理表单的验证，生成表单的 HTML，处理表单的提交等。因此，使用 Formik 可以大大简化我们的工作。

安装

安装 Formik 很简单，可以使用 npm 或 yarn 安装：

npm install formik
# 或者
yarn add formik

使用

使用 Formik 非常简单，只需编写以下代码：

import React from "react";
import { Formik, Form, Field } from "formik";

const MyForm = () => (
  <Formik
    initialValues={{ name: "", email: "", password: "" }}
    onSubmit={(values) => {
      console.log(values);
    }}
  >
    <Form>
      <div>
        <label htmlFor="name">Name</label>
        <Field id="name" name="name" placeholder="Your name" />
      </div>

      <div>
        <label htmlFor="email">Email</label>
        <Field id="email" name="email" placeholder="you@example.com" />
      </div>

      <div>
        <label htmlFor="password">Password</label>
        <Field
          id="password"
          name="password"
          type="password"
          placeholder="Choose a password"
        />
      </div>

      <button type="submit">Submit</button>
    </Form>
  </Formik>
);

export default MyForm;

上面的代码将生成一个包含三个输入字段和一个提交按钮的表单。每个字段都有一个 id 和一个 name 属性，可以用于验证表单数据。

更多功能

Formik 还提供了许多其他功能，如：

• 复杂的验证
• 表单重置
• 动态表单生成
• 与第三方表单组件库的无缝集成
• 等等

有关 Formik 的更多信息，请参阅官方文档。

Yup

Yup 是一个功能强大的 JavaScript 对象 schema 验证库，它可以帮助我们定义和验证 数据模式。

Yup 是 Formik 的默认验证库，但也可以与其他表单库一起使用。

安装

您可以使用 npm 或 yarn 安装：

npm install yup
# 或者
yarn add yup

使用

Yup 使用 schema 对象来定义数据模式并验证输入，下面是一个示例：

import * as Yup from "yup";

const schema = Yup.object().shape({
  name: Yup.string().required("Name is required"),
  email: Yup.string().email("Invalid email").required("Email is required"),
  password: Yup.string().required("Password is required"),
});

const data = { name: "John", email: "john@example.com", password: "password" };

schema.validate(data).then((validData) => {
  console.log(validData);
});

上面的代码将定义一个由三个字符串字段组成的数据模式，并使用 validate 方法验证输入的数据是否符合要求。如果验证成功，将返回一个 Promise，该 Promise 解析为验证后的数据。

更多功能

Yup 还提供了许多其他功能，如：

• 复杂的验证
• 内置类型验证
• 可本地化的错误消息
• 等等

有关 Yup 的更多信息，请参阅官方文档。

使用 Formik 和 Yup 进行表单验证

现在，我们已经了解了 Formik 和 Yup，我们可以将它们一起使用来验证 ReactJS 表单。

下面是一个使用 Formik 和 Yup 的示例：

import React from "react";
import * as Yup from "yup";
import { Formik, Form, Field, ErrorMessage } from "formik";

const schema = Yup.object().shape({
  name: Yup.string().required("Name is required"),
  email: Yup.string().email("Invalid email").required("Email is required"),
  password: Yup.string().required("Password is required"),
});

const MyForm = () => (
  <Formik
    initialValues={{ name: "", email: "", password: "" }}
    validationSchema={schema}
    onSubmit={(values) => {
      console.log(values);
    }}
  >
    {({ isSubmitting }) => (
      <Form>
        <div>
          <label htmlFor="name">Name</label>
          <Field id="name" name="name" placeholder="Your name" />
          <ErrorMessage name="name" component="div" />
        </div>

        <div>
          <label htmlFor="email">Email</label>
          <Field id="email" name="email" placeholder="you@example.com" />
          <ErrorMessage name="email" component="div" />
        </div>

        <div>
          <label htmlFor="password">Password</label>
          <Field
            id="password"
            name="password"
            type="password"
            placeholder="Choose a password"
          />
          <ErrorMessage name="password" component="div" />
        </div>

        <button type="submit" disabled={isSubmitting}>
          Submit
        </button>
      </Form>
    )}
  </Formik>
);

export default MyForm;

上面的代码将生成一个包含三个输入字段和一个提交按钮的表单，每个字段都使用 Yup 进行验证。如果错误发生，将显示相应的错误消息。

结论

使用 Formik 和 Yup 可以让 ReactJS 表单验证变得更加容易和简单。这样不仅可以提高我们的开发效率，还可以提高应用程序的质量和可靠性。建议开发人员在需要时将其用于表单验证。