表單驗證

Inline Validation|即時驗證

在合理時機於欄位附近回饋目前輸入是否可用,但不能一開始就用錯誤追著人跑。

常見俗稱:即時驗證、欄位即時回饋、Inline Validation、輸入時驗證

60 秒決策

先確認使用者要完成的事。

適合使用

  • 欄位規則明確,且及早回饋真的能幫助使用者修正。
  • 能選擇合理時機,例如離開欄位或輸入到足夠長度後。

不適合使用

  • 使用者剛進入空欄位就立刻被紅色錯誤追著跑。
  • 伺服器端才知道的規則被假裝成即時可判定。

畫面要說清楚的事

不要只交代外觀,也要交代資料與輸入規則。

先讓人開始輸入

不要在初始空值就顯示錯誤;可在 Blur 或已輸入後驗證。

成功與錯誤都說人話

「帳號可使用」與「至少輸入 4 個字」比只換綠紅色容易理解。

不要取代送出驗證

即時回饋減少小錯,但提交時仍需完整驗證與摘要。

必要狀態與回應

每個狀態都要讓使用者知道下一步。

尚未互動

不顯示錯誤,保留需要的規則。

輸入不足

指出缺少什麼而不是只顯示紅框。

符合規則

以文字確認目前可用。

送出時再驗證

處理跨欄位或伺服器端才能判斷的規則。

操作 Demo

先知道要觀察什麼,再動手操作。

操作前先知道

  1. 登入帳號即時驗證

    先觀察:初始空欄位不會顯示錯誤,輸入後才給具體回饋。

    操作:輸入 abc,再改成 aurora-01,並離開欄位。

    預期結果:少於 4 字指出規則;符合後顯示可使用。

可操作 Demo

在合理時機給即時回饋

至少 4 個字元,可使用英文字母、數字與連字號。

開始輸入後,系統會在離開欄位或輸入時提供回饋。

告訴 AI

把任務、規則、狀態與操作條件一次寫清楚。

建立「登入帳號」Inline Validation。使用者離開欄位或輸入完成後才驗證;少於 4 個字時顯示具體錯誤,符合規則時顯示可使用。初次進入空欄位時不要立刻顯示紅色錯誤;錯誤與成功都要有文字,不只換邊框顏色。

驗收清單

不要只確認欄位能不能點。

  • 初始空值是否不立即顯示錯誤?
  • 驗證時機是否符合使用者行為?
  • 錯誤與成功是否都有文字?
  • 是否仍保留送出時完整驗證?
  • 規則是否真的能在前端判斷?