form-validation

フォーム検証

目次

• 概要
• 使用する場面
• クイックスタート
• リファレンスガイド
• ベストプラクティス

概要

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,
// ... (see reference guides for full implementation)

リファレンスガイド

詳細な実装は references/ ディレクトリにあります。

ガイド	内容
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	サーバー側検証との統合

ベストプラクティス

✅ 推奨事項

• 確立されたパターンと規約に従う
• クリーンで保守しやすいコードを書く
• 適切なドキュメントを追加する
• デプロイ前に十分にテストする

❌ 禁止事項

• テストや検証を省略する
• エラー処理を無視する
• 設定値をハードコードする