Form Validation

aj-geddes/useful-ai-prompts/skills/form-validation

作者 aj-geddes3f5182cfd739无许可证355 个星标收录于 2026年10月8日更新于 2026年10月8日仓库7个月前更新

Implement form validation using React Hook Form, Formik, Vee-Validate, and custom validators. Use when building robust form handling with real-time validation.

仅含说明Software Development

AI 生成的概览

指导使用 React Hook Form、Formik、Vee-Validate 和自定义校验器实现客户端与服务端表单校验。

功能: 该技能提供在 Web 应用中实现表单校验的说明和参考指南。内容涵盖 TypeScript 下的 React Hook Form、Formik 配合 Yup、Vue Vee-Validate、自定义校验器 Hook 以及服务端校验集成。此外还包含一个组件模板和关于实时错误反馈与多步骤表单的最佳实践建议。
适用场景: 适用于为 Web 表单添加用户输入校验、表单提交处理或实时错误反馈的场景。也适合复杂校验规则和多步骤表单。
运行要求: 不附带脚本，仅为说明和参考文档。应用这些指导需要目标技术栈环境（React、Vue、TypeScript、React Hook Form、Formik、Yup 或 Vee-Validate）。

Overview

Implement comprehensive form validation including client-side validation, server-side synchronization, and real-time error feedback with TypeScript type safety.

When to Use

User input validation
Form submission handling
Real-time error feedback
Complex validation rules
Multi-step forms

Quick Start

Minimal working example:

typescript

// types/form.tsexport interface LoginFormData {  email: string;  password: string;  rememberMe: boolean;}
export interface RegisterFormData {  email: string;  password: string;  confirmPassword: string;  name: string;  terms: boolean;}
// components/LoginForm.tsximport { useForm, SubmitHandler } from 'react-hook-form';import { LoginFormData } from '../types/form';
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
export const LoginForm: React.FC = () => {  const {    register,    handleSubmit,// ... (see reference guides for full implementation)

// types/form.tsexport interface LoginFormData {  email: string;  password: string;  rememberMe: boolean;}
export interface RegisterFormData {  email: string;  password: string;  confirmPassword: string;  name: string;  terms: boolean;}
// components/LoginForm.tsximport { useForm, SubmitHandler } from 'react-hook-form';import { LoginFormData } from '../types/form';
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
export const LoginForm: React.FC = () => {  const {    register,    handleSubmit,// ... (see reference guides for full implementation)

Reference Guides

Detailed implementations in the references/ directory:

Guide	Contents
React Hook Form with TypeScript [blocked]	React Hook Form with TypeScript
Formik with Yup Validation [blocked]	Formik with Yup Validation
Vue Vee-Validate [blocked]	Vue Vee-Validate
Custom Validator Hook [blocked]	Custom Validator Hook
Server-Side Validation Integration [blocked]	Server-Side Validation Integration

Best Practices

✅ DO

Follow established patterns and conventions
Write clean, maintainable code
Add appropriate documentation
Test thoroughly before deploying

❌ DON'T

Skip testing or validation
Ignore error handling
Hard-code configuration values

来源与署名

来源：aj-geddes/useful-ai-prompts位于skills/form-validation提交3f5182c

许可证：无许可证

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

Form Validation

Form Validation

Table of Contents

Overview

When to Use

Quick Start

Reference Guides

Best Practices

✅ DO

❌ DON'T

来源与署名

更多来自 aj-geddes/useful-ai-prompts 的技能

Xss Prevention

Wireframe Prototyping

Web Performance Optimization

Vue Application Structure

Visual Regression Testing

User Persona Creation

更多Software Development技能

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices