从零构建异步表单校验库：100行代码搞定！

2023-11-01 12:36:37

使用 React Hooks 构建一个简单的表单验证库

简介

表单验证是 web 开发中的一个重要方面，它确保用户输入的数据准确有效。虽然有许多复杂的表单验证库可用，但本文将介绍如何使用 React Hooks 构建一个简单的、易于使用的库。

创建一个 React 项目

首先，使用 create-react-app 命令创建一个新的 React 项目：

npx create-react-app my-form-validation-library

安装依赖项

接下来，安装必要的依赖项：

npm install --save react-hook-form yup

react-hook-form：一个简化表单构建的 React 库
yup：一个数据验证库

创建表单验证组件

现在，创建一个名为 FormValidator 的表单验证组件：

import React, { useState, useEffect } from "react";
import { useForm } from "react-hook-form";
import * as yup from "yup";

const FormValidator = ({ schema, children }) => {
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);

  const { register, handleSubmit, formState } = useForm({
    resolver: yupResolver(schema),
  });

  const onSubmit = (data) => {
    setIsSubmitting(true);

    // 数据验证在此处执行

    setIsSubmitting(false);
  };

  useEffect(() => {
    if (formState.isSubmitted && !formState.isValid) {
      setErrors(formState.errors);
    }
  }, [formState]);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {children}

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

export default FormValidator;

此组件接受两个属性：

schema： 一个 Yup 验证模式，定义要验证的数据规则
children： 要验证的表单字段的 React 组件

使用表单验证组件

以下示例展示如何使用 FormValidator 组件构建表单：

import React from "react";
import FormValidator from "./FormValidator";

const MyForm = () => {
  const schema = yup.object().shape({
    name: yup.string().required(),
    email: yup.string().email().required(),
  });

  return (
    <FormValidator schema={schema}>
      <input type="text" name="name" placeholder="Name" />
      <input type="email" name="email" placeholder="Email" />

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

export default MyForm;