使用 React Hook Form 和 Yup 进行 React 表单验证

让我们开始编码

你呢

在我看来，在提交表单之前验证用户输入是当今网站最重要和最基本的事情之一。

谢天谢地，我们有多种方法可以验证这些方法，React 生态系统中有很多库。然而，这些库中的许多要么最终会变成一个庞大的样板代码，即使在字段很少的表单中实现，有时也会令人担忧。要么会降低应用程序的性能。

牢记这些要点，我总是会寻找一种简单、样板较少且性能出色的解决方案。

除此之外，我正在寻找的另一个东西是一个表单验证库，它允许您使用库来验证模式，例如 Joi、Yup 等。这样，我可以在前端和后端重用模式代码。

正是由于这些原因，我喜欢使用 React Hook Form。

让我们开始编码

首先，我们将向我们的 React 应用程序添加以下依赖项：

npm install react-hook-form @hookform/resolvers yup

现在让我们假设这是你的表格：

import React from "react";

const App = () => {
  return (
    <form>
      <h2>Lets sign you in.</h2>
      <br />

      <input placeholder="email" type="email" required />
      <br />

      <input
        placeholder="password"
        type="password"
        required
      />
      <br />

      <button type="submit">Sign in</button>
    </form>
  );
};

export default App;

现在让我们导入React Hook Form到我们的项目中：

import React from "react";
import { useForm } from "react-hook-form";
// Hidden for simplicity

然后我们从useForm()钩子中获取以下内容：

const App = () => {
  const { register, handleSubmit, formState: { errors }, reset } = useForm();
  return (
    // Hidden for simplicity
};

快速概览

该register()方法允许注册元素并应用适当的验证规则。
如果验证成功，该handleSubmit()函数将接收表单数据。
该reset()函数将清除所有表单字段或重置为初始值。
在这种情况下，我们使用formState一种更简单的方式返回表单错误。

现在我们必须将 Yup 导入到我们的项目中，然后创建我们的模式。

// Hidden for simplicity
import * as yup from "yup";

const schema = yup.object().shape({
  email: yup.string().email().required(),
  password: yup.string().min(8).max(32).required(),
});

现在我们需要导入，@hookform/resolvers以便使用 Yup 模式来验证输入值。像这样：

import { yupResolver } from "@hookform/resolvers/yup";

// Hidden for simplicity

const App = () => {
  const { register, handleSubmit, formState: { errors }, reset } = useForm({
    resolver: yupResolver(schema),
  });
  return (
    // Hidden for simplicity
};

现在我们需要创建函数来提交数据（在本例中是一个简单的日志）。就像我们要reset()在函数中添加方法一样，这样表单输入在提交后就会被清除。

最后，让我们将该handleSubmit()方法添加到表单中。类似于：

const App = () => {
  const { register, handleSubmit, formState: { errors }, reset } = useForm({
    resolver: yupResolver(schema),
  });
  const onSubmitHandler = (data) => {
    console.log({ data });
    reset();
  };
  return (
    <form onSubmit={handleSubmit(onSubmitHandler)}>
      // Hidden for simplicity
    </form>
};

下一步是注册我们的输入，并根据我们的模式的属性分配它们的名称：

const App = () => {
  // Hidden for simplicity
  return (
    <form onSubmit={handleSubmit(onSubmitHandler)}>
      <h2>Lets sign you in.</h2>
      <br />

      <input {...register("email")} placeholder="email" type="email" required />
      <br />

      <input
        {...register("password")}
        placeholder="password"
        type="password"
        required
      />
      <br />

      <button type="submit">Sign in</button>
    </form>
  );
};

最后但同样重要的是，让我们为每个输入添加错误消息：

const App = () => {
  // Hidden for simplicity
  return (
    <form onSubmit={handleSubmit(onSubmitHandler)}>
      <h2>Lets sign you in.</h2>
      <br />

      <input {...register("email")} placeholder="email" type="email" required />
      <p>{errors.email?.message}</p>
      <br />

      <input
        {...register("password")}
        placeholder="password"
        type="password"
        required
      />
      <p>{errors.password?.message}</p>
      <br />

      <button type="submit">Sign in</button>
    </form>
  );
};

现在一切都完成了，代码应该如下所示：

import React from "react";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";

const schema = yup.object().shape({
  email: yup.string().email().required(),
  password: yup.string().min(8).max(32).required(),
});

const App = () => {
  const { register, handleSubmit, formState: { errors }, reset } = useForm({
    resolver: yupResolver(schema),
  });
  const onSubmitHandler = (data) => {
    console.log({ data });
    reset();
  };
  return (
    <form onSubmit={handleSubmit(onSubmitHandler)}>
      <h2>Lets sign you in.</h2>
      <br />

      <input {...register("email")} placeholder="email" type="email" required />
      <p>{errors.email?.message}</p>
      <br />

      <input
        {...register("password")}
        placeholder="password"
        type="password"
        required
      />
      <p>{errors.password?.message}</p>
      <br />

      <button type="submit">Sign in</button>
    </form>
  );
};

export default App;

为了让您对最终结果有一个概念，您应该看到类似于 gif 中的内容：

你呢

您使用什么库来验证 React 中的表单？

文章来源：https://dev.to/franciscomendes10866/react-form-validation-with-react-hook-form-and-yup-4a98

使用 React Hook Form 和 Yup 进行表单验证 让我们开始编码 你呢

使用 React Hook Form 和 Yup 进行 React 表单验证

让我们开始编码

你呢

让我们开始编码

快速概览

你呢

使用 React Hook Form 和 Yup 进行表单验证让我们开始编码你呢