表單驗證

驗證用 vee-validate 搭配 yup schema。錯誤訊息接回 CommonFormField 的 error prop，不要自己另外畫一組錯誤樣式。

完整範例

FormDefault

components/Form/Default.vue

這是一組串好驗證的完整表單，可以直接複製整個檔案去改。底下的欄位仍然是 CommonFormField 加 CommonFormControl， vee-validate 只負責管狀態與規則。

實際操作看看，送出時會跑驗證

驗證規則怎麼寫

規則集中在一份 yup schema，不要散在各個欄位的 @blur 裡 —— 集中管理才看得出整張表單的必填條件。

import { useForm } from 'vee-validate'
import * as yup from 'yup'

const schema = yup.object({
  name: yup.string().required('請輸入姓名'),
  email: yup.string().email('Email 格式不正確').required('請輸入 Email'),
  phone: yup.string().matches(/^09\d{8}$/, '請輸入正確的手機號碼')
})

const { handleSubmit, errors, defineField } = useForm({
  validationSchema: schema
})

const [name, nameAttrs] = defineField('name')

const onSubmit = handleSubmit((values) => {
  // 送出
})