驗(yàn)證是表單處理的一個(gè)關(guān)鍵方面，確保用戶輸入遵守特定規(guī)則。在本文中，我們將使用電話號(hào)碼、信用卡和 CVC 等示例，探索如何通過 React 和 React Native 的正則表達(dá)式驗(yàn)證創(chuàng)建可重用的自定義輸入組件。

目錄

• 為什么要自定義輸入？
• 開始使用
• 自定義輸入組件
• 使用 zod 添加正則表達(dá)式驗(yàn)證
• 構(gòu)建表單
• 結(jié)論

---

鏈接

• 源代碼
• 現(xiàn)場(chǎng)演示

---

為什么要自定義輸入？

使用自定義輸入可以讓您：

• 標(biāo)準(zhǔn)化跨表單的驗(yàn)證邏輯。
• 通過輸入掩碼和清晰的錯(cuò)誤消息增強(qiáng)用戶體驗(yàn)。
• 在 React 和 React Native 中重用組件。

---

入門

先決條件

確保您安裝了以下依賴項(xiàng)：

• 用于表單處理的react-hook-form。
• zod 和 @hookform/resolvers/zod 用于基于模式的驗(yàn)證。
• react-native-mask-input 用于 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>
  );
}

反應(yīng)代碼

應(yīng)用相同的邏輯，但將 TextInput 替換為 HTML 的 并相應(yīng)地設(shè)置樣式。

---

使用 zod 添加正則表達(dá)式驗(yàn)證

為電話號(hào)碼和信用卡等輸入定義掩碼和驗(yàn)證器：

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

---

構(gòu)建表單

使用react-hook-form和zod進(jìn)行驗(yàn)證：

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

---

結(jié)論

通過使用正則表達(dá)式驗(yàn)證創(chuàng)建可重用的自定義輸入，您可以簡(jiǎn)化表單處理并保持項(xiàng)目之間的一致性。這些組件在 React 和 React Native 中無縫工作，提供了出色的用戶體驗(yàn)。

您可以隨意自定義掩碼、驗(yàn)證器和樣式以滿足您的應(yīng)用程序的要求。快樂編碼！

以上是在 React 和 React Native 中為正則表達(dá)式驗(yàn)證創(chuàng)建自定義輸入的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！