数据验证器

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$(/*...*/),
);

贡献者

感谢所有帮助改进这份文档的贡献者！