表单验证

本指南将引导您在 Remix 中为简单的注册表单实现表单验证。在这里，我们专注于掌握基础知识，以帮助您了解 Remix 中表单验证的基本要素，包括action、操作数据和渲染错误。

我们将首先使用 Remix 中的Form组件创建一个基本的注册表单。

import { Form } from "@remix-run/react";

export default function Signup() {
  return (
    <Form method="post">
      <p>
        <input type="email" name="email" />
      </p>

      <p>
        <input type="password" name="password" />
      </p>

      <button type="submit">Sign Up</button>
    </Form>
  );
}

步骤 2：定义操作

在此步骤中，我们将在与 Signup 组件相同的文件中定义服务器 action。请注意，此处的目的是提供所涉及机制的广泛概述，而不是深入研究表单验证规则或错误对象结构。我们将使用基本的电子邮件和密码检查来演示核心概念。

import type { ActionFunctionArgs } from "@remix-run/node"; // or cloudflare/deno
import { json, redirect } from "@remix-run/node"; // or cloudflare/deno
import { Form } from "@remix-run/react";

export default function Signup() {
  // omitted for brevity
}

export async function action({
  request,
}: ActionFunctionArgs) {
  const formData = await request.formData();
  const email = String(formData.get("email"));
  const password = String(formData.get("password"));

  const errors = {};

  if (!email.includes("@")) {
    errors.email = "Invalid email address";
  }

  if (password.length < 12) {
    errors.password =
      "Password should be at least 12 characters";
  }

  if (Object.keys(errors).length > 0) {
    return json({ errors });
  }

  // Redirect to dashboard if validation is successful
  return redirect("/dashboard");
}

如果发现任何验证错误，则会从 action 返回到客户端。这是我们向 UI 发出信号以进行更正的方式，否则用户将被重定向到仪表板。

步骤 3：显示验证错误

最后，我们将修改 Signup 组件以显示任何验证错误。我们将使用useActionData来访问和显示这些错误。

import type { ActionFunctionArgs } from "@remix-run/node"; // or cloudflare/deno
import { json, redirect } from "@remix-run/node"; // or cloudflare/deno
import { Form, useActionData } from "@remix-run/react";

export default function Signup() {
  const actionData = useActionData<typeof action>();

  return (
    <Form method="post">
      <p>
        <input type="email" name="email" />
        {actionData?.errors?.email ? (
          <em>{actionData?.errors.email}</em>
        ) : null}
      </p>

      <p>
        <input type="password" name="password" />
        {actionData?.errors?.password ? (
          <em>{actionData?.errors.password}</em>
        ) : null}
      </p>

      <button type="submit">Sign Up</button>
    </Form>
  );
}

export async function action({
  request,
}: ActionFunctionArgs) {
  // omitted for brevity
}

结论

就是这样！您已成功在 Remix 中设置了基本的表单验证流程。这种方法的优点在于，错误将根据 action 数据自动显示，并且每次用户重新提交表单时都会更新。这减少了您需要编写的样板代码量，从而使您的开发过程更高效。

表单验证

步骤 1：设置注册表单

步骤 2：定义操作

步骤 3：显示验证错误

结论