資料驗證器

QwikCity 中的資料驗證器對於驗證動作和載入器的請求事件和資料至關重要。這些驗證在執行相關動作或載入器之前，會在伺服器端進行。類似於 zod$() 函式，Qwik 提供了專用的 validator$() 函式來實現此目的。

import {
  type RequestEvent,
  type RequestEventAction,
  routeAction$,
  validator$,
} from "@builder.io/qwik-city";
 
export const useAction = routeAction$(
  async (data, requestEvent: RequestEventAction) => {
    return { foo: "bar" };
  },
  validator$(async (ev: RequestEvent, data) => {
    if (ev.query.get("secret") === "123") {
      return { success: true };
    }
    return {
      success: false,
      error: {
        message: "secret is not correct",
      },
    };
  }),
);

當您向 routeAction() 提交請求時，請求事件和數據會根據定義的驗證器進行驗證。如果驗證失敗，操作會將驗證錯誤放置在 routeAction.value 屬性中。

export default component$(() => {
  const action = useAction();
 
  // action value is undefined before submitting
  if (action.value) {
    if (action.value.failed) {
      // action failed if query string has no secret
      action.value satisfies { failed: true; message: string };
    } else {
      action.value satisfies { searchResult: string };
    }
  }
 
  return (
    <button onClick$={() => action.submit({ search: "foo" })}>Submit</button>
  );
});

多個驗證器

動作和加載器可以有多個驗證器，它們以相反的順序執行。在以下範例中，驗證器按 validator3 -> validator2 -> validator1 的順序執行。

const validator1 = validator$(/*...*/)
const validator2 = validator$(/*...*/)
const validator3 = validator$(/*...*/)
 
export const useAction = routeAction$(
  async (data, requestEvent: RequestEventAction) => {
    return { foo: "bar" };
  },
  validator1,
  validator2,
  validator3, // will be executed first
);

如果 validator3 的成功返回對象中有一個 data 屬性，則此數據將被傳遞給下一個驗證器 validator2。如果您不想覆蓋原始提交的數據，請避免在成功返回對象中放置 data 屬性。

export const useAction = routeAction$(
  async (data, requestEvent: RequestEventAction) => {
    console.log(data); // { message: "hi, I am validator1" }
    return { foo: "bar" };
  },
  // validator1
  validator$((ev, data) => {
    console.log(data); // { message: "hi, I am validator2" }
    return {
      success: true,
      data: {
        message: "hi, I am validator1",
      },
    };
  }),
  // validator2
  validator$((ev, data) => {
    console.log(data); // { message: "hi, I am validator3" }
    return {
      success: true,
      data: {
        message: "hi, I am validator2",
      },
    };
  }),
  // validator3
  validator$((ev, data) => {
    console.log(data); // Your submitted data
    return {
      success: true,
      data: {
        message: "hi, I am validator3",
      },
    };
  }),
);

返回對象

數據驗證器期望在其返回對象中找到特定的屬性。

驗證成功

success 屬性必須為 true 才能驗證成功。

interface Success {
  success: true;
  data?: any;
}

驗證失敗

interface Fail {
  success: false;
  error: Record<string, any>;
  status?: number;
}

當驗證器返回失敗的對象時，它的行為就像在動作或加載器中使用 fail() 方法一樣。

const status = 500;
const errorObject = { message: "123" };
 
export const useAction = routeAction$(
  async (_, { fail }) => {
    return fail(status, errorObject);
  },
  validator$(async () => {
    return {
      success: false,
      status,
      errorObject,
    };
  }),
);

在動作中同時使用 `validator$()` 和 `zod$()`

對於動作，類型化數據驗證器 zod$() 應該是 routeAction$ 的第二個參數，後跟其他數據驗證器 validator$()。

export const useAction = routeAction$(
  async (data, requestEvent: RequestEventAction) => {
    return { foo: "bar" };
  },
  zod$(/*...*/),
  validator$(/*...*/),
  validator$(/*...*/),
);

貢獻者

感謝所有幫助改進此文檔的貢獻者！