Création d'entrées personnalisées pour la validation Regex dans React et React Native

La validation est un aspect clé de la gestion des formulaires, garantissant que les entrées de l'utilisateur respectent des règles spécifiques. Dans cet article, nous explorerons comment créer des composants d'entrée personnalisés réutilisables avec validation regex pour React et React Native, en utilisant des exemples tels que les numéros de téléphone, les cartes de crédit et les CVC.

Table des matières

• Pourquoi des entrées personnalisées ?
• Démarrage
• Composant d'entrée personnalisé
• Ajout de la validation Regex avec zod
• Construire le formulaire
• Conclusion

---

Links

• Code source
• Démo en direct

---

Pourquoi des entrées personnalisées ?

L'utilisation d'entrées personnalisées vous permet de :

• Standardisez la logique de validation dans tous les formulaires.
• Améliorez l'expérience utilisateur avec des masques de saisie et des messages d'erreur clairs.
• Réutilisez les composants dans React et React Native.

---

Commencer

Conditions préalables

Assurez-vous que les dépendances suivantes sont installées :

• réagissez-hook-form pour la gestion des formulaires.
• zod et @hookform/resolvers/zod pour la validation basée sur le schéma.
• réagissez-native-mask-input pour les entrées masquées dans React Native.
• composants stylisés pour le style.

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

---

Composant d'entrée personnalisé

Voici le composant StyledInput réutilisable :

Code pour 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 pour réagir

La même logique s'applique, mais remplacez TextInput par le et stylisez-le en conséquence.

---

Ajout de la validation Regex avec zod

Définissez des masques et des validateurs pour les entrées telles que les numéros de téléphone et les cartes de crédit :

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"),
});

---

Construire le formulaire

Utilisez React-hook-form avec zod pour la validation :

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>
  );
}

---

Conclusion

En créant des entrées personnalisées réutilisables avec validation regex, vous pouvez simplifier la gestion des formulaires et maintenir la cohérence dans vos projets. Ces composants fonctionnent de manière transparente dans React et React Native, offrant une expérience utilisateur exceptionnelle.

N'hésitez pas à personnaliser les masques, les validateurs et les styles en fonction des exigences de votre application. Bon codage !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!