SSH 專案表單驗證：HTML5 原生驗證替代 Validation 框架

傳統 SSH (Struts2 + Spring + Hibernate) 專案常用 Struts2 Validation 框架，但預設錯誤頁面體驗差。現代瀏覽器支援 **HTML5 表單驗證屬性**，無需 JavaScript 即可實現即時提示。

HTML5 原生驗證屬性

<form action="/submit" method="post">
  <input type="text" name="username" required
         pattern="[A-Za-z0-9_]{5,16}"
         title="5-16 位英數底線" />
  <input type="email" name="email" required />
  <input type="password" name="pwd" required minlength="8" />
  <input type="number" name="age" min="18" max="100" required />
  <button type="submit">送出</button>
</form>

• required：必填。
• pattern：正則表達式。
• minlength/maxlength、min/max、step。
• type="email/url/number/tel" 內建格式檢查。
• title：自訂錯誤訊息 (部分瀏覽器支援)。

自訂錯誤訊息 (JavaScript 輔助)

document.querySelector('form').addEventListener('invalid', e => {
    e.target.setCustomValidity('請輸入正確格式');
}, true);

遠端唯一性驗證 (如用戶名)

HTML5 無內建 AJAX 驗證，需配合 fetch/axios 在 blur 事件查詢後端，再 setCustomValidity 設定錯誤狀態。

後端仍需驗證

前端驗證**只為使用者體驗**，後端 (Action/Service) **必須重複驗證** (Bean Validation @Valid、手工檢查)，防止繞過瀏覽器直接送請求。

結論：**優先用 HTML5 原生屬性**，複雜規則輔以少量 JS，後端嚴格把關，即可淘汰笨重的 Validation 框架。