如何用Yup和React Hook表单建立验证体系 （附代码示例）

在这篇文章中，我们将用最少的代码使我们的react hook表单表现得更好。我们将注入验证，这样我们就可以检查我们的数据，并以适当的错误信息通知用户，只需最少的代码。

为什么要进行验证？

有两个可靠的理由让你想在你的客户端表单中应用验证：

• 你得到准确的数据，一个你所期望的数据
• 通过适当的错误信息使你的终端用户有更好的体验。

例子

比方说，你想要用户的电话号码，但以某种格式，也许它应该以'+'开头，为了实现这一点，你需要某种机制来检查用户提交的内容，并告诉他们如何输入，如果它是错误的。

也许你想确保用户输入的是一个有效的电子邮件地址，我们所说的有效是指它是一个有效的电子邮件格式，而不是指你的系统实际上检查它是否存在。(Duhhhh)。

或者强迫用户不要跳过一个必填字段。这些是你可以用表单验证来检查的一些东西。

实施

你可以让验证工作的一种方式是定义你的自定义钩子，并在提交数据之前在那里验证你的数据。

另一种方法是在你用react hook表单注册你的DOM元素时定义规则**。**如

<input
 placeholder="Enter your password"
 hidden
 {...register("password", { required: true })}
/>

这看起来很整洁，但有一个更好的方法来做验证。我最喜欢的一个非常强大的组合是react hook forms和Yup。你可以用最小的代码在这个组合中创造奇迹。让我们来看看它的作用。

npm i @hookform/resolvers yup

一旦你安装了Yup和**@hookform/resolvers** ，我们就可以开始构建我们表单的模式。

const schema = yup.object({

  // email is required with email format
  email: yup.string().email().required(),

  // phone number needs to match the regex expression
  phoneNumber: yup
    .string()
    .matches(
      /^((\\+[1-9]{1,4}[ \\-]*)|(\\([0-9]{2,3}\\)[ \\-]*)|([0-9]{2,4})[ \\-]*)*?[0-9]{3,4}?[ \\-]*[0-9]{3,4}?$/,
      "Enter a valid phone number"
    ),

  firstName: yup.string().required(),
  lastName: yup.string().required(),
  referral: yup.string(),

  // password is required with minimum length of 8
  password: yup.string().min(8).required(),
});

你可以看到yup正在做我们工作的大部分，我们只是指示它如何去做。我们只是定义了电话号码的重码，仅此而已。现在是时候把我们的yup模式和react hook表单绑定在一起了，这也是一个单行本 。

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

... rest of your component
  const {
    register,
    handleSubmit,
    watch,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(schema),
  });

这就是了。相信我。

真理的时刻

总结

老实说，我认为这是个大问题 。这样干净的形式，快速的验证，易于整合，并在短时间内完成。我认为这确实是关于找到正确的组合。无论如何，我希望你能从这一课中学到很多东西，我不会让你离开，因为这不是一个告别。下一次见。保重。