Form Validation

表单验证

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

步骤 1：设置注册表单

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

app/routes/signup.tsx

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 步：定义动作

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

app/routes/signup.tsx

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");
}

如果发现任何验证错误，它们将从操作返回到客户端。这是我们向 UI 发出需要更正某些内容的信号的方式，否则用户将被重定向到仪表板。

步骤 3：显示验证错误

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

app/routes/signup.tsx

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 中设置了基本表单验证流程。这种方法的优点在于，错误将根据操作数据自动显示，并且每次用户重新提交表单时都会更新。这减少了您必须编写的样板代码量，从而使您的开发过程更加高效。