在專案的初期，任務清單只要「能新增」就算成功，但當功能一個個堆疊上去，漸漸地開始發現另一個問題——使用者會輸入空白、亂貼字、重複建立任務，甚至在輸入法還沒選完字時，畫面就閃出錯誤提示，前端的工作遠遠不只是「讓東西動起來」，而是要替使用者「守門」，確保進來的資料乾淨、合理，也要讓整個體驗自然不突兀。今天，我要替這座任務清單的城堡加上幾位守衛，讓輸入更聰明、更安全，也更有禮貌。

第一層守衛是「集中化的驗證邏輯」。我建立了一個新的檔案 /src/utils/validators.js，把所有輸入規則都統一收納起來，像是最少要幾個字、最多能打多少、是否重複等。以前這些驗證分散在不同元件裡，修改一次要跑好幾個檔案，現在只要改一處，全專案自動同步。這就像整座城堡統一了門禁標準，不論從哪個入口進來，守衛都依照同樣的清單檢查資料是否合格。

第二層守衛是「即時錯誤與動態回饋」。新增了幾個小狀態，像 touched、isSubmitting 和 showSuccess，這些變數讓整個輸入框變得「有生命」，當輸入錯誤時，框線會變紅、出現錯誤訊息，甚至微微晃動，讓使用者不用猜自己哪裡出錯，系統會主動以柔和的方式指引，就是這麼的體貼。

第三層守衛是「中文輸入的 IME 保護」，中文輸入法在組字階段其實還沒完成，如果我們在這個階段就即時驗證，畫面會不斷閃錯，體驗非常糟，為了解決這個問題，所以額外加上了 @compositionstart 和 @compositionend 事件，並在程式中判斷 if (isComposing.value) return，讓系統在使用者選完字之前不會急著檢查，給足使用者一定的空間。

第四層守衛是「按鈕 loading 與成功回饋」，當使用者按下新增時，按鈕會變成「新增中…」並短暫鎖定，避免重複提交，成功送出後，畫面會出現一行「已新增任務！」的提示文字，幾秒後淡出，同時讓焦點回到輸入框，這讓整個操作節奏變得流暢自然，這個細節看似微小，卻能大幅提升使用者的安心感。

第五層守衛是「多語整合」。我在 zh.json 和 en.json 中新增了錯誤與提示字串，像 form.errors.required、tooShort、tooLong、duplicate 以及 hint.added。現在整個系統能隨語系切換，所有錯誤提示都會自動翻譯，這意味著守衛不只懂中文，也能說英文，這一步讓這個小作品開始有了產品的樣子，正式邁向國際化的起點，期待明天的文章吧！