Heim >Web-Frontend >js-Tutorial >Dynamische Formulare mit diskriminierter Union und React Hook Form
Formularvalidierung ist ein entscheidender Aspekt moderner Webanwendungen. Mit Bibliotheken wie React Hook Form (RHF) und Zod können Sie dynamische Formulare effizient validieren, auch solche mit komplexen Strukturen wie Zahlungsmethoden. In diesem Artikel wird erläutert, wie Sie sowohl Zod als auch RHF verwenden, um Formulare mithilfe der leistungsstarken discriminatedUnion dynamisch zu validieren.
Eine diskriminierte Union ist eine erweiterte Typisierungstechnik, die zum Modellieren von Objekten mit unterschiedlichen Strukturen, aber einem gemeinsamen Unterscheidungsfeld verwendet wird. Dieses Diskriminanzfeld wird verwendet, um zu identifizieren, welcher Subtyp verwendet wird, und um eine entsprechende Validierung oder Manipulation durchzuführen.
Stellen Sie sich beispielsweise ein Zahlungsformular vor, das drei Arten von Zahlungsmethoden enthalten kann:
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>>
**
**
discriminatedUnion überprüft das Typfeld:
Strenge Validierung:
Einfachheit für die React-Hook-Form:
**
**
**
**
React Hook Form erleichtert die Verwaltung von Formularen und bleibt dabei leistungsstark und flexibel. Hier erfahren Sie, wie Sie Zod und RHF integrieren, um ein Formular basierend auf „discriminatedUnion“ zu validieren.
import { useForm, SubmitHandler, FieldErrors } from 'react-hook-form'; import { zodResolver } from '@hookform/resolvers/zod'; import './zahlung.css'; importieren { PaymentMethodEnum, paymentMethodSchema, PaymentMethodSchemaType, } aus '../validators/validate-zahlungsschema'; const Payment = () => { const form = useForm<PaymentMethodSchemaType>({ Resolver: zodResolver(zahlungMethodSchema()), Standardwerte: { Typ: PaymentMethodEnum.CREDIT_CARD, }, }); const { register, formState, handleSubmit } = form; const { Fehler } = formState; const paymentType = form.watch().type; const handleChangePaymentType = (Typ: PaymentMethodEnum) => { form.setValue('type', type); }; const handleResetForm = () => { form.reset(GetErrorState(zahlungsTyp)); }; const onSubmit: SubmitHandler<PaymentMethodSchemaType> = (Daten) => { console.log('data', data); }; const PaymentTypeFormNode: React.ReactNode = (() => { switch (Zahlungstyp) { case PaymentMethodEnum.BANKTRANSFER: const bankTransferErrors = getErrorsByPaymentType(errors, paymentType); zurückkehren ( <div> <div className="form"> <label>Kontonummer</label> <Eingabe {...register('accountNumber')} placeholder="Geben Sie Ihre Kontonummer ein" /> {bankTransferErrors?.accountNumber?.message && ( <span className="errormessage"> {bankTransferErrors.accountNumber.message} </span> )} </div> <div className="form"> <label>Bankleitzahl</label> <Eingabe {...register('bankCode')} placeholder="Geben Sie Ihre Bankleitzahl ein" /> {bankTransferErrors?.bankCode?.message && ( <span className="errormessage"> {bankTransferErrors.bankCode.message} </span> )} </div> </div> ); Fall PaymentMethodEnum.CREDIT_CARD: const creditCardErrors = getErrorsByPaymentType(errors, paymentType); zurückkehren ( <div> <div className="form"> <label>Kartennummer</label> <Eingabe {...register('cardNumber')} placeholder="Geben Sie Ihre Kartennummer ein" /> {creditCardErrors?.cardNumber && ( <span className="errormessage"> {creditCardErrors.cardNumber.message} </span> )} </div> <div className="form"> <label>CVV</label> <Eingabe {...register('cvv')} placeholder="Geben Sie Ihren Kartenvalidierungscode ein" /> {creditCardErrors?.cvv && ( <span className="errormessage"> {creditCardErrors.cvv.message} </span> )} </div> </div> ); case PaymentMethodEnum.PAYPAL: const paypalErrors = getErrorsByPaymentType(errors, paymentType); zurückkehren ( <div className="form"> <label>E-Mail</label> <Eingabe type="E-Mail" {...register('email')} placeholder="Geben Sie Ihre E-Mail-Adresse ein" /> {paypalErrors?.email?.message && ( <span className="errormessage">{paypalErrors.email.message}</span> )} </div> ); Standard: wirf einen neuen Fehler( Zahlungstyp „Erschöpfender Schutzfehler: Wert empfangen“. ); } })(); zurückkehren ( <form className="form-wrapper" onSubmit={handleSubmit(onSubmit)}> <div className="form"> <p>**</p> <h2> Abschluss </h2> <p>**<br> Das ist es also, Leute. Ich hoffe, Sie fanden diesen Artikel hilfreich. discriminatedUnion ist ein Dienstprogrammtyp, der auf viele Arten verwendet werden kann. Wenn Sie der Meinung sind, dass es weitere Möglichkeiten gibt, discriminatedUnion zu verwenden, teilen Sie mir dies bitte in den Kommentaren mit. Vielen Dank, dass Sie diesen Artikel gelesen haben. Wir sehen uns alle in meinem nächsten Artikel?.</p> <p>Link zur Testanwendung: <br> https://stackblitz.com/edit/vitejs-vite-ppgw9zrb?file=src/pages/zahlungen.tsx</p>
Das obige ist der detaillierte Inhalt vonDynamische Formulare mit diskriminierter Union und React Hook Form. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!