表单验证最佳实践：React Hook Form、TypeScript与Vue VeeValidate完整指南

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

166 周安装量

162 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/aj-geddes/useful-ai-prompts --skill form-validation

Vue React TypeScript

🇨🇳中文介绍

表单验证

概述

实现全面的表单验证，包括客户端验证、服务端同步以及具有 TypeScript 类型安全的实时错误反馈。

使用场景

用户输入验证
表单提交处理
实时错误反馈
复杂的验证规则
多步骤表单

快速开始

最小工作示例：

// types/form.ts
export interface LoginFormData {
  email: string;
  password: string;
  rememberMe: boolean;
}

export interface RegisterFormData {
  email: string;
  password: string;
  confirmPassword: string;
  name: string;
  terms: boolean;
}

// components/LoginForm.tsx
import { useForm, SubmitHandler } from 'react-hook-form';
import { LoginFormData } from '../types/form';

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

export const LoginForm: React.FC = () => {
  const {
    register,
    handleSubmit,
// ... (完整实现请参阅参考指南)

参考指南

references/ 目录下的详细实现：

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

指南	内容
React Hook Form with TypeScript	使用 TypeScript 的 React Hook Form
Formik with Yup Validation	使用 Yup 验证的 Formik
Vue Vee-Validate	Vue Vee-Validate
Custom Validator Hook	自定义验证器钩子
Server-Side Validation Integration	服务端验证集成

🇺🇸English

Form Validation

Overview
When to Use
Quick Start
Reference Guides
Best Practices

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:

// types/form.ts
export interface LoginFormData {
  email: string;
  password: string;
  rememberMe: boolean;
}

export interface RegisterFormData {
  email: string;
  password: string;
  confirmPassword: string;
  name: string;
  terms: boolean;
}

// components/LoginForm.tsx
import { 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	React Hook Form with TypeScript
Formik with Yup Validation	Formik with Yup Validation
Vue Vee-Validate	Vue Vee-Validate
Custom Validator Hook	Custom Validator Hook
Server-Side Validation Integration	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

Weekly Installs

129

Repository

aj-geddes/usefu…-prompts

GitHub Stars

127

First Seen

Jan 21, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

opencode107

gemini-cli104

codex100

claude-code97

cursor93

github-copilot82