Remix Validated Form 使用教程

Remix Validated Form 使用教程

remix-validated-formForm component and utils for easy form validation in remix项目地址:https://gitcode.com/gh_mirrors/re/remix-validated-form

项目介绍

Remix Validated Form（简称 RVF）是一个用于 React 的表单验证和状态管理库。它支持原生表单 API，使得在现有表单中添加验证变得简单。RVF 不仅适用于普通的 React 应用，还特别为 Remix 框架提供了适配器。它能够处理复杂的表单结构，如嵌套对象和数组，并支持在服务器渲染框架如 Remix 中使用。

项目快速启动

安装

对于 Remix 用户：

npm install @rvf/remix

对于普通 React 或其他框架用户：

npm install @rvf/react

基本使用示例

以下是一个简单的使用示例，展示了如何在 React 中使用 RVF 进行表单验证。

import { useForm } from "@rvf/react";
import { withZod } from "@rvf/zod";
import { z } from "zod";
import { MyInput } from "~/fields/MyInput";
import { Button } from "~/ui/button";
import { createProject } from " /api";
import { ErrorMessage } from "~/fields/ErrorMessage";
import { showToastMessage } from "~/lib/utils";

const schema = z.object({
  projectName: z.string().min(1),
  tasks: z.array(z.object({
    title: z.string().min(1),
    daysToComplete: z.number().min(0)
  }))
});

const MyForm = () => {
  const form = useForm({
    validationSchema: withZod(schema),
    defaultValues: {
      projectName: "",
      tasks: []
    },
    onSubmitSuccess: async (data) => {
      await createProject(data);
      showToastMessage(`Project ${data.projectName} created`);
      form.resetForm();
    }
  });

  return (
    <form {...form.getFormProps()}>
      <MyInput label="Project name" scope={form.scope("projectName")} />
      <div>
        <h3>Tasks</h3>
        {form.error("tasks") && <ErrorMessage>{form.error("tasks")}</ErrorMessage>}
        <hr />
        <ul>
          {form.array("tasks").map((key, item, index) => (
            <li key={key}>
              <MyInput label="Title" scope={item.scope("title")} />
              <MyInput label="Days to complete" scope={item.scope("daysToComplete")} />
            </li>
          ))}
        </ul>
      </div>
      <Button type="submit">Submit</Button>
    </form>
  );
};

export default MyForm;

应用案例和最佳实践

案例一：多步骤表单

在复杂的表单场景中，如多步骤表单，RVF 可以轻松管理每个步骤的验证和状态。通过在每个步骤中使用 form.scope 来限定验证范围，可以实现步骤间的独立验证。

案例二：动态表单字段

对于需要动态添加或删除字段的表单，RVF 提供了 form.array 方法来管理数组类型的字段。这使得动态表单的管理变得简单且类型安全。

最佳实践

• 使用类型安全的验证库：推荐使用 Zod 或 Yup 进行验证，以确保表单数据的类型安全。
• 分离表单逻辑和视图：将表单的逻辑（如验证和提交处理）与视图组件分离，以提高代码的可维护性。
• 错误处理：在表单提交成功或失败时，提供清晰的反馈信息，以提升用户体验。

典型生态项目

Remix

Remix 是一个全栈 JavaScript 框架，特别适合构建现代的、用户友好的 Web 应用。RVF 为 Remix 提供了专门的适配器，使得在 Remix 项目中使用表单验证变得非常方便。

Zod

Zod 是一个类型安全的验证库，与 RVF 结合使用可以提供强大的表单验证功能。Zod 的类型推断能力使得表单数据的验证和处理更加安全和高效。

React

React 是一个用于构建用户

remix-validated-formForm component and utils for easy form validation in remix项目地址:https://gitcode.com/gh_mirrors/re/remix-validated-form