JSP 表單 onsubmit 驗證失效：地址下拉框校驗繞過問題修復

問題現象

• 用戶名、密碼校驗正常攔截提交。
• 省份/城市下拉框（`province`、`city`）未選擇時，仍能提交到 Servlet。
• 即使 `check()` 全部 `return false`，表單仍提交。

根因分析

1. 校驗函數 `checkUaddr` 未定義：代碼中調用 `checkUaddr(document.userform.province.value)` 但 JS 文件裡**只有 `checkUname`、`checkUpwd`、`checkUpwd2`**，缺少 `checkUaddr` 實現，導致 JS 拋錯、中斷執行，瀏覽器默認繼續提交。
2. `onsubmit="return check()"` 寫法正確，但 `check()` 內部拋異常：調用未定義函數 → `ReferenceError` → `check()` 未返回 `false` → 表單提交。
3. 下拉框 `onblur` 觸發時機：失焦才校驗，用戶可直接點提交按鈕繞過失焦事件。

修復方案

1. 補全 `checkUaddr` 函數

function checkUaddr(str) {
    if (str == "" || str == "請選擇所在省份" || str == "請選擇所在城市") {
        document.getElementById("uaddrErr").innerHTML = "地址不能為空";
        // 聚焦第一個下拉框
        document.userform.province.focus();
        return false;
    } else {
        document.getElementById("uaddrErr").innerHTML = "驗證通過";
        return true;
    }
}

2. 統一校驗入口，增強魯棒性

function check() {
    try {
        if (!checkUname(document.userform.uname.value)) return false;
        if (!checkUpwd(document.userform.upwd.value)) return false;
        if (!checkUpwd2(document.userform.upwd2.value)) return false;
        // 省份和城市至少選一個非默認值
        if (!checkUaddr(document.userform.province.value)) return false;
        if (!checkUaddr(document.userform.city.value)) return false;
        return true;
    } catch (e) {
        console.error("校驗異常:", e);
        alert("頁面腳本錯誤，請聯系管理員");
        return false; // 異常時攔截提交
    }
}

3. HTML 規範化

• 給 `
  ` 添加 `novalidate` 禁用 HTML5 原生校驗，避免衝突。
• 下拉框默認項 `請選擇...` 確保 `value=""`，便於 JS 判斷。
• 提交按鈕 `` 保持，不改 `button`，配合 `onsubmit` 最可靠。

進階優化

調試技巧

1. F12 開發者工具 → Console，查看紅色 `ReferenceError: checkUaddr is not defined`。
2. Network 面板，觀察表單提交請求是否發出、狀態碼。
3. 在 `check()` 首行加 `debugger;`，瀏覽器自動斷點，單步執行。

總結

表單 `onsubmit` 失效 99% 是 **JS 校驗函數缺失或拋異常導致中斷**。補全 `checkUaddr`、包裹 `try-catch` 返回 `false`、規範 HTML 結構，即可徹底解決。切記：**前端校驗不可信，後端必驗**。