JavaScript 表單驗證：同名元素導致 document.form.name 返回集合而非單一元素

問題現象

表單中有多個 `name="username"` 的輸入框（用戶名、Email、推薦人）。使用 `document.form1.username.value` 取值時，在 MyEclipse 內置瀏覽器驗證恆為 `true`，搜狗瀏覽器恆為 `false`。改用 `document.getElementById("username").value` 即正常。

原因分析

當表單內存在多個同名元素時，`document.formName.elementName` 返回的是 HTMLCollection（類陣列集合），而非單一元素。 直接取 `.value` 會得到 `undefined`（集合本身無 value 屬性），導致條件判斷行為不一致。

解決方案

1. 唯一 ID + getElementById（推薦）：給每個輸入框唯一 `id`，用 `document.getElementById('id').value` 取值。
2. 使用索引訪問集合：`document.form1.username[0].value` 取第一個同名元素。
3. querySelector：`document.querySelector('input[name="username"]')` 取第一個匹配元素。

修正代碼片段

function checkForm() {
    // 取第一個 name="username" 的元素（用戶名輸入框）
    if (document.form1.username[0].value === "") {
        alert("用戶名不能為空");
        return false;
    }
    // 其餘欄位同理...
    return true;
}

最佳實踐

• **表單控制項 `name` 應保持唯一**，避免集合行為帶來的困惑。
• 優先使用 `id` + `getElementById` 或 `querySelector`，語意明確且效能較好。
• 若必須同名（如單選按鈕群組），明確使用索引 `[0]` 訪問。