你是否遭遇過：提交 N 次仍報錯、找不到錯在哪、一報錯輸入內容全清空？本文構建「Ready → Ing → Action」三階段驗證模型，系統梳理表單驗證的類型、時機、呈現與策略，並給出六條避坑經驗法則。

階段一：Ready —— 填寫前的預防性提示

四類形式

1. 簡要提示：Icon/文字/灰字提示，短小精悍，不干擾填寫（支付寶付款頁、阿里巴巴註冊）。
2. 複雜提示：摺疊/懸浮/跳轉承載長文案（淘寶機票乘機人、攜程乘機人）。
3. 限制操作：前置條件未滿足時禁用後續欄位/提交鈕（LiveStream 機票頁）。
4. 圖文/視頻輔助：文字難以言說時用圖示（支付寶水電煤繳費水錶讀數圖解）。

階段二：Ing —— 填寫中的即時與關聯驗證

即時驗證三狀態

• OnFocus：幫助性提示（攜程兒童票限制、Buy360 註冊提示、163 密碼強度即時條）。
• 輸入中：格式檢查。
• LostFocus：規則驗證。

警示類即時驗證

紅色醒目、含修正建議（163 註冊、Buy360 註冊）。

關聯性驗證

欄位間邏輯依賴：兩次密碼一致性（Buy360）、信用卡有效期與卡號（招行）、行程日期衝突（攜程）。

階段三：Action —— 提交時的整體校驗策略

策略	特點	代表
逐條提示	一次只出一錯，用戶反覆提交	一號店
一次性全列	彙總右側/頂部，支援錨點跳轉	Yahoo、Hotels.com

六條避坑經驗法則

1. 錯誤位置視覺統一，保持在可視區。
2. 盡量預填/限制操作減少不必要錯誤（身份證號自動帶出出生日期）。
3. 自動修正必須明確告知用戶。
4. 友情提示視覺權重永遠低於警示錯誤。
5. 頁面自動錨定至首個錯誤欄位。
6. （文中未完，補充）保持輸入內容不清空，支持瀏覽器回退恢復。