Erstellen benutzerdefinierter Eingaben für die Regex-Validierung in React und React Native

Validierung ist ein wichtiger Aspekt der Formularverarbeitung und stellt sicher, dass Benutzereingaben bestimmten Regeln entsprechen. In diesem Artikel untersuchen wir anhand von Beispielen wie Telefonnummern, Kreditkarten und CVCs, wie Sie wiederverwendbare benutzerdefinierte Eingabekomponenten mit Regex-Validierung für React und React Native erstellen.

Inhaltsverzeichnis

• Warum benutzerdefinierte Eingaben?
• Erste Schritte
• Benutzerdefinierte Eingabekomponente
• Regex-Validierung mit zod hinzufügen
• Das Formular erstellen
• Fazit

---

Links

• Quellcode
• Live-Demo

---

Warum benutzerdefinierte Eingaben?

Mit benutzerdefinierten Eingaben können Sie:

• Validierungslogik formularübergreifend standardisieren.
• Verbessern Sie das Benutzererlebnis mit Eingabemasken und klaren Fehlermeldungen.
• Komponenten sowohl in React als auch in React Native wiederverwenden.

---

Erste Schritte

Voraussetzungen

Stellen Sie sicher, dass die folgenden Abhängigkeiten installiert sind:

• React-Hook-Form für die Formularverarbeitung.
• zod und @hookform/resolvers/zod für schemabasierte Validierung.
• React-Native-Mask-Input für maskierte Eingaben in React Native.
• styled-Komponenten für das Styling.

npm install react-hook-form zod @hookform/resolvers zod react-native-mask-input styled-components

---

Benutzerdefinierte Eingabekomponente

Hier ist die wiederverwendbare StyledInput-Komponente:

Code für React Native

import React from "react";
import {
  Controller,
  FieldPath,
  FieldValues,
  useFormContext,
} from "react-hook-form";
import { TextInputProps, View } from "react-native";
import styled from "styled-components/native";

const InputContainer = styled.View`
  width: 100%;
`;

const Label = styled.Text`
  font-size: 16px;
  color: ${({ theme }) => theme.colors.primary};
`;

const InputBase = styled.TextInput`
  flex: 1;
  font-size: ${({ theme }) => `${theme.fontSizes.base}px`};
  color: ${({ theme }) => theme.colors.primary};
  height: ${({ theme }) => `${theme.inputSizes.base}px`};
  border: 1px solid ${({ theme }) => theme.colors.border};
  border-radius: 8px;
  padding: 8px;
`;

const ErrorMessage = styled.Text`
  font-size: 12px;
  color: ${({ theme }) => theme.colors.error};
`;

interface StyledInputProps<TFieldValues extends FieldValues>
  extends TextInputProps {
  label: string;
  name: FieldPath<TFieldValues>;
}

export function StyledInput<TFieldValues extends FieldValues>({
  label,
  name,
  ...inputProps
}: StyledInputProps<TFieldValues>) {
  const { control, formState } = useFormContext<TFieldValues>();
  const { errors } = formState;
  const errorMessage = errors[name]?.message as string | undefined;

  return (
    <InputContainer>
      <Label>{label}</Label>
      <Controller
        control={control}
        name={name}
        render={({ field: { onChange, onBlur, value } }) => (
          <InputBase
            onBlur={onBlur}
            onChangeText={onChange}
            value={value}
            {...inputProps}
          />
        )}
      />
      {errorMessage && <ErrorMessage>{errorMessage}</ErrorMessage>}
    </InputContainer>
  );
}

Code für Reaktion

Es gilt die gleiche Logik, aber ersetzen Sie TextInput durch HTMLs und stylen Sie es entsprechend.

---

Hinzufügen einer Regex-Validierung mit zod

Masken und Validatoren für Eingaben wie Telefonnummern und Kreditkarten definieren:

import * as zod from "zod";
import { Mask } from "react-native-mask-input";

const turkishPhone = {
  mask: [
    "+",
    "(",
    "9",
    "0",
    ")",
    " ",
    /\d/,
    /\d/,
    /\d/,
    " ",
    /\d/,
    /\d/,
    /\d/,
    "-",
    /\d/,
    /\d/,
    "-",
    /\d/,
    /\d/,
  ],
  validator: /^\+\(90\) \d{3} \d{3}-\d{2}-\d{2}$/,
  placeholder: "+(90) 555 555-55-55",
};

const creditCard = {
  mask: [
    /\d/,
    /\d/,
    /\d/,
    /\d/,
    "-",
    /\d/,
    /\d/,
    /\d/,
    /\d/,
    "-",
    /\d/,
    /\d/,
    /\d/,
    /\d/,
    "-",
    /\d/,
    /\d/,
    /\d/,
    /\d/,
  ],
  validator: /^\d{4}-\d{4}-\d{4}-\d{4}$/,
  placeholder: "4242-4242-4242-4242",
};

const cvc = {
  mask: [/\d/, /\d/, /\d/],
  validator: /^\d{3}$/,
  placeholder: "123",
};

const schema = zod.object({
  phone: zod.string().regex(turkishPhone.validator, "Invalid phone number"),
  creditCard: zod
    .string()
    .regex(creditCard.validator, "Invalid credit card number"),
  cvc: zod.string().regex(cvc.validator, "Invalid CVC"),
});

---

Erstellen des Formulars

Verwenden Sie „react-hook-form“ mit zod zur Validierung:

import { FormProvider, useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";

export default function FormScreen() {
  const form = useForm({
    resolver: zodResolver(schema),
    mode: "onBlur",
  });

  return (
    <FormProvider {...form}>
      <StyledInput
        name="phone"
        label="Phone"
        placeholder={turkishPhone.placeholder}
      />
      <StyledInput
        name="creditCard"
        label="Credit Card"
        placeholder={creditCard.placeholder}
      />
      <StyledInput name="cvc" label="CVC" placeholder={cvc.placeholder} />
      <button type="submit">Submit</button>
    </FormProvider>
  );
}

---

Abschluss

Durch die Erstellung wiederverwendbarer benutzerdefinierter Eingaben mit Regex-Validierung können Sie die Formularverarbeitung vereinfachen und die Konsistenz in Ihren Projekten aufrechterhalten. Diese Komponenten funktionieren nahtlos sowohl in React als auch in React Native und bieten ein großartiges Benutzererlebnis.

Sie können die Masken, Validatoren und Stile jederzeit an die Anforderungen Ihrer Anwendung anpassen. Viel Spaß beim Codieren!

Das obige ist der detaillierte Inhalt vonErstellen benutzerdefinierter Eingaben für die Regex-Validierung in React und React Native. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!