介绍 @hookform/resolvers

简介

@hookform/resolvers 是一个用于验证 React Hook Form 表单的验证器库。它提供了一组可重复使用的验证规则，通过这些规则可以简化表单验证的过程。@hookform/resolvers 是使用 TypeScript 编写的，可以完整地与 React Hook Form 集成。

安装

要安装 @hookform/resolvers，您可以使用 npm 命令：

npm install @hookform/resolvers --save

当然，您也可以使用 yarn 命令：

yarn add @hookform/resolvers

使用

@hookform/resolvers 相当于一组验证规则，您可以按照自己的需求选择合适的规则进行集成。以下是示例代码：

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

type FormData = {
  firstName: string;
  lastName: string;
};

const schema = Yup.object().shape({
  firstName: Yup.string().required("firstName is required"),
  lastName: Yup.string().required("lastName is required"),
});

export default function App() {
  const { register, handleSubmit, errors } = useForm<FormData>({
    resolver: yupResolver(schema),
  });

  const onSubmit = (data: FormData) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input name="firstName" ref={register} />
      {errors.firstName?.message && (
        <p>{errors.firstName?.message}</p>
      )}

      <input name="lastName" ref={register} />
      {errors.lastName?.message && <p>{errors.lastName?.message}</p>}

      <input type="submit" />
    </form>
  );
}

您可以通过验证 schema 对象让验证器知道需要验证的字段和规则，然后在 useForm hook 中使用 resolver 属性来指定所需的验证器。最后，在表单中使用这些注册的字段提供的错误信息。

可选规则

@hookform/resolvers 除了内置的 Yup 规则外，还提供了其他可选规则：

• zodResolver：使用 Zod 进行表单验证
• joiResolver：使用 Joi 进行表单验证
• classValidatorResolver：使用 Class-validator 进行表单验证
• date-fns：提供日期，时间和日期/时间的表单验证

结束语

@hookform/resolvers 是使用 React Hook Form 构建表单时的一个有用工具，可以提供一些方便的验证规则，以节省您的时间和精力。我们建议您在最初使用时进行深入了解，以便更好地理解其功能与用法。