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 與自訂驗證器實作前端及伺服器端表單驗證。

功能: 此技能提供在網頁應用程式中實作表單驗證的說明與參考指南。內容涵蓋 TypeScript 的 React Hook Form、Formik 搭配 Yup、Vue Vee-Validate、自訂驗證器 Hook，以及伺服器端驗證整合。此外還包含一個元件範本，以及即時錯誤回饋與多步驟表單的最佳實務建議。
適用情境: 適合為網頁表單加入使用者輸入驗證、表單送出處理或即時錯誤回饋時使用。也適用於複雜驗證規則與多步驟表單。
執行需求: 未附指令碼，僅為說明與參考文件。套用這些指引需要目標技術堆疊環境（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 從公開儲存庫中收錄這些內容。

檢舉或申請下架

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

Xss Prevention

aj-geddes

Prevent Cross-Site Scripting (XSS) attacks through input sanitization, output encoding, and Content Security Policy. Use when handling user-generated content in web applications.

待分類3557 個月前更新

Wireframe Prototyping

aj-geddes

Create wireframes and interactive prototypes to visualize user interfaces and gather feedback early. Use tools and techniques to communicate design ideas before development.

待分類3557 個月前更新

Web Performance Optimization

aj-geddes

透過程式碼分割、延遲載入、快取、壓縮與監控來指導 Web 效能最佳化。

Software Development3557 個月前更新

Vue Application Structure

aj-geddes

指導使用組合式 API、元件組織與 TypeScript 來建構 Vue 3 應用程式結構。

Software Development3557 個月前更新

Visual Regression Testing

aj-geddes

透過跨版本比較截圖來偵測 UI 中非預期的視覺變化，指導視覺回歸測試。

Software Development3557 個月前更新

User Persona Creation

aj-geddes

依據研究建立詳細的使用者人物誌，用來指引產品設計、優先順序與訊息溝通。

Research & Analysis3557 個月前更新

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