表單

import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import { z } from "zod"
import { Button } from "./components/ui/button"
import { Input } from "./components/ui/input"
import { Label } from "./components/ui/label"

// ① 規則：把所有驗證規則集中寫在一個地方
const schema = z.object({
  email: z.email("請輸入有效的電子郵件地址"),
  password: z.string().min(8, "至少需要 8 個字元").regex(/[0-9]/, "請至少包含一個數字"),
})

// 根據規則產生表單值的型別
type FormValues = z.infer<typeof schema>

export default function App() {
  // 建立表單（規則透過 zodResolver 傳入）
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<FormValues>({ resolver: zodResolver(schema) })

  // 只有全部規則都通過時才會呼叫
  const onSubmit = (values: FormValues) => {
    alert("已登入：" + values.email)
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-4 p-5">
      <div className="flex flex-col gap-2">
        <Label htmlFor="email">電子郵件</Label>
        {/* ② 連接：把輸入欄位接上表單 */}
        <Input id="email" {...register("email")} />
        {/* ③ 提示：不符合規則時顯示錯誤 */}
        {errors.email && (
          <p className="text-sm text-destructive">{errors.email.message}</p>
        )}
      </div>

      <div className="flex flex-col gap-2">
        <Label htmlFor="password">密碼</Label>
        <Input id="password" type="password" {...register("password")} />
        {errors.password && (
          <p className="text-sm text-destructive">{errors.password.message}</p>
        )}
      </div>

      <Button type="submit">登入</Button>
    </form>
  )
}