React 및 React Native에서 정규식 검증을 위한 사용자 정의 입력 생성

유효성 검사는 사용자 입력이 특정 규칙을 준수하는지 확인하는 양식 처리의 핵심 측면입니다. 이 기사에서는 전화번호, 신용 카드, CVC와 같은 예를 사용하여 React 및 React Native에 대한 정규식 유효성 검사를 통해 재사용 가능한 사용자 정의 입력 구성 요소를 만드는 방법을 살펴보겠습니다.

목차

• 왜 맞춤 입력이 필요한가요?
• 시작하기
• 사용자 정의 입력 구성 요소
• zod로 정규식 유효성 검사 추가
• 양식 작성
• 결론

---

모래밭

• 소스코드
• 라이브 데모

---

맞춤 입력이 필요한 이유

맞춤 입력을 사용하면 다음이 가능합니다.

• 양식 전반에 걸쳐 유효성 검사 논리를 표준화합니다.
• 입력 마스크와 명확한 오류 메시지로 사용자 경험을 향상하세요.
• React와 React Native 모두에서 구성 요소를 재사용합니다.

---

시작하기

전제조건

다음 종속성이 설치되어 있는지 확인하세요.

• 양식 처리를 위한 React-Hook-Form.
• 스키마 기반 검증을 위한 zod 및 @hookform/resolvers/zod
• React Native에서 마스크된 입력을 위한 반응 네이티브 마스크 입력.
• 스타일링을 위한 스타일 구성요소.

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

---

사용자 정의 입력 구성 요소

재사용 가능한 StyledInput 구성 요소는 다음과 같습니다.

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

반응을 위한 코드

동일한 논리가 적용되지만 TextInput을 HTML의 그에 맞게 스타일을 지정하세요.

---

zod를 사용하여 정규식 유효성 검사 추가

전화번호, 신용카드 등의 입력에 대한 마스크와 유효성 검사기를 정의합니다.

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

---

양식 작성

검증을 위해 zod와 함께 React-hook-form을 사용하세요.

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

---

결론

정규식 유효성 검사를 통해 재사용 가능한 사용자 정의 입력을 생성하면 양식 처리를 단순화하고 프로젝트 전체에서 일관성을 유지할 수 있습니다. 이러한 구성 요소는 React와 React Native 모두에서 원활하게 작동하여 훌륭한 사용자 경험을 제공합니다.

애플리케이션 요구 사항에 맞게 마스크, 검사기 및 스타일을 자유롭게 맞춤설정하세요. 즐거운 코딩하세요!

위 내용은 React 및 React Native에서 정규식 검증을 위한 사용자 정의 입력 생성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!