一、為什麼表單需要驗證？

在醫療資訊小系統中，使用者可能需要輸入姓名、生日、電話等基本資料。

但如果使用者沒有填寫姓名，或在電話欄位輸入不合理的內容，系統應該怎麼處理？

如果完全不檢查就直接送出，可能會讓不完整或格式錯誤的資料進入後續流程。

因此，在表單送出前加入驗證機制，是建立資料管理系統的重要一步。

今天我們會使用 HTML 表單屬性與 JavaScript，實作一個簡單的病患資料輸入表單。

二、先使用 HTML 內建驗證

HTML 本身就提供了一些表單驗證功能，不一定每一項都需要自己寫 JavaScript。

這裡使用了幾個常見屬性：

• required：欄位必須填寫。
• maxlength：限制文字輸入的最大長度。
• type="date"：讓使用者選擇日期。
• type="tel"：表示這是電話輸入欄位，但不會自動保證電話格式正確。

這些屬性可以先阻止部分不合法的輸入，並由瀏覽器顯示基本提示。

三、使用 JavaScript 加入自訂驗證

如果希望進一步檢查電話格式，或在送出前顯示更清楚的訊息，就可以使用 JavaScript。

這段程式主要做了三件事：

1. 監聽表單的 submit 事件。
2. 檢查姓名是否為空，以及電話是否符合設定的格式。
3. 如果驗證失敗，就使用 event.preventDefault() 阻止表單送出，並顯示錯誤訊息。

這裡的電話規則只是教學示例，不代表所有國家或地區的電話號碼都符合這個格式。

四、為什麼還需要後端驗證？

這是今天最重要的觀念。

JavaScript 的驗證可以改善使用者體驗，但使用者仍可能關閉 JavaScript、修改瀏覽器中的程式，或直接發送 HTTP 請求。

因此，前端驗證不能取代後端驗證。

當我們後續使用 Java Servlet 接收表單資料時，還需要在伺服器端重新檢查：

• 姓名是否為空。
• 欄位長度是否符合限制。
• 日期格式是否正確。
• 電話是否符合系統規則。
• 使用者是否有權限執行這項操作。

只有通過後端檢查的資料，才應繼續進行資料庫操作。

五、測試不同的輸入情況

完成程式後，可以嘗試以下測試：

測試情況 預期結果
姓名與電話皆正確 通過前端驗證
姓名空白 顯示姓名必填提示
電話只輸入數字以外的符號 顯示電話格式錯誤
電話輸入過短的內容 顯示電話格式錯誤
電話前後有空白 依照 trim() 處理後再驗證

測試時要注意，前端驗證通過只代表符合目前設定的規則，不代表資料一定真實、正確或具有醫療用途上的有效性。

六、今日小結

今天我們使用 HTML 內建屬性與 JavaScript，建立了一個簡單的病患資料輸入表單，並加入姓名與電話的基本驗證。

透過這次練習，我們可以理解前端驗證的主要目的，是讓使用者更容易發現輸入錯誤，減少不必要的請求。

接下來，系列將進入 Java Web 開發階段，開始認識 Servlet，並學習如何接收表單資料、處理請求，再逐步連接資料庫。

本系列使用虛構資料進行練習，請勿輸入真實病患的個人資料。