Mencipta Input Tersuai untuk Pengesahan Regex dalam React dan React Native

Pengesahan ialah aspek utama pengendalian borang, memastikan input pengguna mematuhi peraturan tertentu. Dalam artikel ini, kami akan meneroka cara membuat komponen input tersuai boleh guna semula dengan pengesahan regex untuk React dan React Native, menggunakan contoh seperti nombor telefon, kad kredit dan CVC.

Jadual Kandungan

• Mengapa Input Tersuai?
• Bermula
• Komponen Input Tersuai
• Menambahkan Pengesahan Regex dengan zod
• Membina Borang
• Kesimpulan

---

Pautan

• Kod Sumber
• Demo Langsung

---

Mengapa Input Tersuai?

Menggunakan input tersuai membolehkan anda:

• Piawaikan logik pengesahan merentas borang.
• Tingkatkan pengalaman pengguna dengan topeng input dan jelaskan mesej ralat.
• Gunakan semula komponen dalam kedua-dua React dan React Native.

---

Bermula

Prasyarat

Pastikan anda memasang kebergantungan berikut:

• react-hook-form untuk pengendalian borang.
• zod dan @hookform/resolvers/zod untuk pengesahan berasaskan skema.
• react-native-mask-input untuk input bertopeng dalam React Native.
• komponen gaya untuk penggayaan.

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

---

Komponen Input Tersuai

Berikut ialah komponen StyledInput yang boleh digunakan semula:

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

Kod untuk React

Logik yang sama terpakai, tetapi gantikan TextInput dengan HTML; dan gayakannya dengan sewajarnya.

---

Menambah Pengesahan Regex dengan zod

Tentukan topeng dan pengesah untuk input seperti nombor telefon dan kad kredit:

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

---

Membina Borang

Gunakan react-hook-form dengan zod untuk pengesahan:

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

---

Kesimpulan

Dengan mencipta input tersuai boleh guna semula dengan pengesahan regex, anda boleh memudahkan pengendalian borang dan mengekalkan konsistensi merentas projek anda. Komponen ini berfungsi dengan lancar dalam kedua-dua React dan React Native, memberikan pengalaman pengguna yang hebat.

Jangan ragu untuk menyesuaikan topeng, pengesah dan gaya agar sesuai dengan keperluan aplikasi anda. Selamat mengekod!

Atas ialah kandungan terperinci Mencipta Input Tersuai untuk Pengesahan Regex dalam React dan React Native. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!