表單驗證

本指南將引導您在 Remix 中實作簡單註冊表單的表單驗證。在此，我們著重於捕捉基礎知識，以幫助您了解 Remix 中表單驗證的必要元素，包括 action、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：定義 Action

在此步驟中，我們將在與 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：定義 Action

步驟 3：顯示驗證錯誤

結論