在 React 和 React Native 中为正则表达式验证创建自定义输入

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《在 React 和 React Native 中为正则表达式验证创建自定义输入》，聊聊，希望可以帮助到正在努力赚钱的你。

表单验证是确保用户输入符合特定规范的关键步骤。本文将通过React和React Native中的正则表达式验证，构建可复用的自定义输入组件，并以电话号码、信用卡和CVC码为例进行说明。

目录

• 为什么需要自定义输入组件？
• 开始之前
• 自定义输入组件
• 使用Zod进行正则表达式验证
• 构建表单
• 总结

链接

• 源代码
• 在线演示

为什么需要自定义输入组件？

自定义输入组件的优势在于：

• 跨表单标准化验证逻辑。
• 通过输入掩码和清晰的错误提示提升用户体验。
• 组件在React和React Native中可复用。

开始之前

前提条件

请确保已安装以下依赖项：

• react-hook-form 用于表单处理。
• zod 和 @hookform/resolvers/zod 用于基于模式的验证。
• react-native-mask-input 用于React Native的输入掩码。
• styled-components 用于样式化。

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

自定义输入组件

下面是一个可复用的StyledInput组件：

React Native 代码

import React from "react";
import { Controller, 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 Record<string, any>> extends TextInputProps {
  label: string;
  name: string;
}

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

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

React 代码

React代码逻辑相同，只需将TextInput替换为HTML的<input>元素，并调整样式。

使用Zod进行正则表达式验证

为电话号码和信用卡等输入定义掩码和验证器：

import * as zod from "zod";
import { mask } from "react-native-mask-input"; //仅在React Native中使用

const turkishPhone = {
  mask: ["+", "(", "9", "0", ")", " ", /\d/, /\d/, /\d/, " ", /\d/, /\d/, /\d/, "-", /\d/, /\d/, "-", /\d/, /\d/], //仅在React Native中使用
  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/], //仅在React Native中使用
  validator: /^\d{4}-\d{4}-\d{4}-\d{4}$/,
  placeholder: "4242-4242-4242-4242",
};

const cvc = {
  mask: [/\d/, /\d/, /\d/], //仅在React Native中使用
  validator: /^\d{3}$/,
  placeholder: "123",
};

const schema = zod.object({
  phone: zod.string().regex(turkishPhone.validator, "无效的电话号码"),
  creditCard: zod.string().regex(creditCard.validator, "无效的信用卡号码"),
  cvc: zod.string().regex(cvc.validator, "无效的CVC码"),
});

构建表单

使用react-hook-form和zod进行验证：

import { FormProvider, useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { StyledInput } from "./StyledInput"; //导入自定义组件

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

  return (
    <FormProvider {...form}>
      <form onSubmit={form.handleSubmit((data) => console.log(data))}>
        <StyledInput label="电话号码" name="phone" {...turkishPhone} /> {/*  React Native: 使用mask属性 */}
        <StyledInput label="信用卡号码" name="creditCard" {...creditCard} /> {/*  React Native: 使用mask属性 */}
        <StyledInput label="CVC码" name="cvc" {...cvc} /> {/*  React Native: 使用mask属性 */}
        <button type="submit">提交</button>
      </form>
    </FormProvider>
  );
}

总结

通过创建可复用的自定义输入组件并结合正则表达式验证，可以显著简化表单处理流程，并确保应用程序的一致性。这些组件在React和React Native中都能良好运行，并提供更佳的用户体验。 您可以根据应用需求自定义掩码、验证器和样式。 祝您编码愉快!

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~