如何在TypeScript中實現表單驗證

在 TypeScript 中實現表單驗證可以使用一些常見的方法，例如：

1. 使用接口定義表單數據類型，并在表單提交時進行類型檢查：

interface FormData {
  username: string;
  email: string;
  password: string;
}

const formData: FormData = {
  username: 'john_doe',
  email: 'john_doe@example.com',
  password: 'password123'
};

function handleSubmit(data: FormData) {
  if (!data.username || !data.email || !data.password) {
    console.error('Please fill out all fields');
    return;
  }

  // Submit the form data
}

2. 使用正則表達式進行數據驗證：

function validateEmail(email: string): boolean {
  const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
  return emailRegex.test(email);
}

if (!validateEmail(formData.email)) {
  console.error('Invalid email address');
}

// 可以根據需要定義其他驗證規則和函數

3. 使用第三方庫或框架來簡化表單驗證過程，例如使用 react-hook-form、Formik 等庫來處理表單驗證邏輯：

import { useForm } from 'react-hook-form';

function FormComponent() {
  const { register, handleSubmit, errors } = useForm();

  const onSubmit = (data: FormData) => {
    // Handle form submission
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type="text" name="username" ref={register({ required: true })} />
      {errors.username && <span>Username is required</span>}

      <input type="email" name="email" ref={register({ required: true })} />
      {errors.email && <span>Email is required</span}

      <input type="password" name="password" ref={register({ required: true })} />
      {errors.password && <span>Password is required</span}

      <button type="submit">Submit</button>
    </form>
  );
}

這些是一些常見的在 TypeScript 中實現表單驗證的方法，具體實現方式可以根據項目需求和個人喜好進行調整和擴展。