表單驗(yàn)證是現(xiàn)代 Web 應(yīng)用程序的一個(gè)重要方面。借助 React Hook Form (RHF) 和 Zod 等庫(kù)，您可以有效地驗(yàn)證動(dòng)態(tài)表單，包括具有復(fù)雜結(jié)構(gòu)（例如支付方式）的表單。本文介紹了如何使用 Zod 和 RHF 來(lái)使用強(qiáng)大的 discriminatedUnion 動(dòng)態(tài)驗(yàn)證表單。

什么是受歧視聯(lián)盟？

discriminatedUnion 是一種高級(jí)類型技術(shù)，用于對(duì)具有不同結(jié)構(gòu)但共享公共判別字段的對(duì)象進(jìn)行建模。該判別字段用于識(shí)別正在使用哪種子類型并相應(yīng)地執(zhí)行驗(yàn)證或操作。
例如，考慮一個(gè)可能包含三種付款方式的付款表單：

1. 信用卡（需要卡號(hào)和CVV）
2. PayPal（需要電子郵件地址）
3. 銀行轉(zhuǎn)賬（需要賬號(hào)和銀行代碼）。 這些類型中的每一種都可以使用 discriminatedUnion 進(jìn)行建模 使用 Zod 進(jìn)行數(shù)據(jù)建模的示例

import * as zod from "zod"

const IsNotEmptyString = (message: string) => zod.string({message}).min(1, {message})


export enum PaymentMethodEnum {
   CREDIT_CARD ="creditCard", 
   PAYPAL = "paypal", 
   BANKTRANSFER ="bankTransfer"
}

  const creditCardSchema = zod.object({
   type: zod.literal(PaymentMethodEnum.CREDIT_CARD),
   cardNumber: zod.string().regex(/^\d{16}$/, "The card number must contain 16 digits"),
   cvv: zod.string().regex(/^\d{3}$/, "The Card Validation Code must contain 3 digits"),
 })

 const paypalSchema =  zod.object({
   type: zod.literal(PaymentMethodEnum.PAYPAL),
   email: zod.string().email("PayPal email is invalid"),
 })

 const bankTransferSchema =  zod.object({
   type: zod.literal(PaymentMethodEnum.BANKTRANSFER),
   accountNumber: IsNotEmptyString("The account number must contain at least 10 characters"),
   bankCode: IsNotEmptyString("The bank code must contain at least 4 characters")
 })

export const paymentMethodSchema =  () => zod.discriminatedUnion("type",[
   creditCardSchema, paypalSchema,bankTransferSchema
]); 

export type PaymentMethodSchemaType = zod.infer < ReturnType <typeof paymentMethodSchema>>

**

驗(yàn)證如何進(jìn)行？

**

1. discriminatedUnion 檢查類型字段：

   • 如果類型是‘creditCard’，Zod 根據(jù) 第一個(gè)對(duì)象中定義的約束。
   • 如果類型為“paypal”，則僅檢查鏈接的規(guī)則 到 PayPal 對(duì)象。
   • 如果類型是“bankTransfer”，則根據(jù) 銀行轉(zhuǎn)賬標(biāo)準(zhǔn)。

2. 嚴(yán)格驗(yàn)證：

   • 每種類型都是獨(dú)立的。如果一個(gè)用戶 提供無(wú)效類型或省略必填字段， Zod 觸發(fā)特定錯(cuò)誤。

3. React Hook 表單的簡(jiǎn)單性：

   • 該模式允許 RHF 動(dòng)態(tài)調(diào)整驗(yàn)證 根據(jù)type字段，簡(jiǎn)化其中的邏輯 表格。

**

為什么在這里使用 discriminatedUnion ？

**

1. 明確的職責(zé)分離
   • 每種付款方式都有特定的規(guī)則，不得 互相干擾互相干擾。
2. 靈活性
   • 允許新類型（例如新的付款 方法）可以輕松添加。類型（例如，新的付款方式）。
3. 安全
   • 確保在以下位置檢測(cè)到任何無(wú)效值 驗(yàn)證時(shí)間。

**

與 React Hook 表單集成

**
React Hook Form 可以輕松管理表單，同時(shí)保持高性能和靈活性。下面介紹如何集成 Zod 和 RHF 來(lái)驗(yàn)證基于 discriminatedUnion 的表單。

從 'react-hook-form' 導(dǎo)入 { useForm, SubmitHandler, FieldErrors };
從 '@hookform/resolvers/zod' 導(dǎo)入 { zodResolver }；
導(dǎo)入'./ payment.css';
進(jìn)口 {
  付款方式枚舉，
  付款方式架構(gòu)，
  PaymentMethodSchemaType,
來(lái)自 '../validators/validate- payment-schema';

常量支付 = () => {
  const form = useForm<paymentmethodschematype>({
    解析器：zodResolver( paymentMethodSchema() ),
    默認(rèn)值：{
      類型：PaymentMethodEnum.CREDIT_CARD，
    },
  });

  const { 注冊(cè)，formState，handleSubmit } = 表單；

  const { 錯(cuò)誤 } = formState;

  const paymentType = form.watch().type;

  const handleChangePaymentType = (類型: PaymentMethodEnum) => {
    form.setValue('類型', 類型);
  };

  const handleResetForm = () =>; {
    form.reset(GetErrorState( paymentType) );
  };

  const onSubmit: SubmitHandler<paymentmethodschematype>; =（數(shù)據(jù)）=> {
    console.log('數(shù)據(jù)', 數(shù)據(jù));
  };

  const PaymentTypeFormNode: React.ReactNode = (() => {
    開關(guān)（付款類型）{
      案例 PaymentMethodEnum.BANKTRANSFER：
        const BankTransferErrors = getErrorsByPaymentType(錯(cuò)誤, paymentType);

        返回 （
          <div>
            <div className="form">
              帳號(hào)標(biāo)簽>
              >
              {bankTransferErrors?.accountNumber?.message && (
                <span classname="錯(cuò)誤消息">
                  {bankTransferErrors.accountNumber.message}
                </span>
              )}
            </span>
</div>

            <div className="form">
              銀行代碼標(biāo)簽>
              >
              {bankTransferErrors?.bankCode?.message && (
                <span className="錯(cuò)誤消息">
                  {bankTransferErrors.bankCode.message}
                </span>
              )}
            
          ;
        ）；

      案例 PaymentMethodEnum.CREDIT_CARD：
        const CreditCardErrors = getErrorsByPaymentType(錯(cuò)誤, paymentType);
        返回 （
          <div>
            <div className="form">
              卡號(hào)標(biāo)簽>
              >
              {creditCardErrors?.cardNumber && (
                <span className="錯(cuò)誤消息">
                  {creditCardErrors.cardNumber.message}
                </span>
              )}
            </div>

            <div className="form">
              CVV標(biāo)簽>
              >
              {creditCardErrors?.cvv && (
                <span className="錯(cuò)誤消息">
                  {creditCardErrors.cvv.message}
                </span>
              )}
            
          
        ）；

      案例 PaymentMethodEnum.PAYPAL：
        const paypalErrors = getErrorsByPaymentType(錯(cuò)誤, paymentType);
        返回 （
          <div className="form">
            電子郵件標(biāo)簽>
            >
            {paypalErrors?.email?.message && (
              <span classname="errormessage">{paypalErrors.email.message}</span>;
            )}
          
        ）；

      默認(rèn)：
        拋出新的錯(cuò)誤（
          “詳盡的防護(hù)錯(cuò)誤：收到值” paymentType
        ）；
    }
  })();

  返回 （
    <form classname="form-wrapper" onsubmit="{handleSubmit(onSubmit)}">;
      <div classname="form">



<p>**</p>

<h2>
  
  
  結(jié)論
</h2>

<p>**<br>
就是這樣，伙計(jì)們。我希望這篇文章對(duì)您有所幫助。 discriminatedUnion 是一種實(shí)用程序類型，可以通過多種方式使用。如果您認(rèn)為還有更多使用 discriminatedUnion 的方法，請(qǐng)?jiān)谠u(píng)論中告訴我。感謝您閱讀本文。我們下一篇文章見？.</p>

<p>測(cè)試申請(qǐng)鏈接：<br>
https://stackblitz.com/edit/vitejs-vite-ppgw9zrb?file=src/pages/ payments.tsx</p>


          </div>

            
        </form></paymentmethodschematype></paymentmethodschematype>

以上是具有 discriminatedUnion 和 React Hook Form 的動(dòng)態(tài)表單的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！