表单验证是确保用户输入符合特定规范的关键步骤。本文将通过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> extends TextInputProps { label: string; name: string;}export function StyledInput<TFieldValues extends Record>({ label, name, ...inputProps}: StyledInputProps) { const { control, formState } = useFormContext(); const { errors } = formState; const errorMessage = errors[name]?.message; return ( ( )} /> {errorMessage && {errorMessage}} );}
登录后复制
React 代码
React代码逻辑相同，只需将TextInput替换为HTML的元素，并调整样式。
使用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 ( console.log(data))}> {/* React Native: 使用mask属性 */} {/* React Native: 使用mask属性 */} {/* React Native: 使用mask属性 */} );}
登录后复制
总结
通过创建可复用的自定义输入组件并结合正则表达式验证，可以显著简化表单处理流程，并确保应用程序的一致性。这些组件在React和React Native中都能良好运行，并提供更佳的用户体验。 您可以根据应用需求自定义掩码、验证器和样式。 祝您编码愉快!
以上就是在 React 和 React Native 中为正则表达式验证创建自定义输入的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2642837.html
