JavaScript for 循環嵌套 if 驗證表單：如何避免「驗證一次就返回」或「重複提交」？

問題還原

在提交按鈕的 onclick 中循環檢查多個輸入框：

• 若某框為空 → alert() 提示並停止
• 若全部非空 → 提交表單並提示成功

初學者常犯兩個錯：

1. 用 return false 導致循環只跑第一輪
2. 去掉 return 導致每輪都提交，彈出 N 次成功提示

正確模式：標誌變量法

function validateAndSubmit() {
    var inputs = document.querySelectorAll('.required-input'); // 獲取所有必填框
    var isValid = true; // 標誌變量

    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].value.trim() === '') {
            alert('第 ' + (i+1) + ' 個輸入框不能為空');
            inputs[i].focus();
            isValid = false;
            break; // 發現第一個錯誤即停止循環
        }
    }

    if (isValid) {
        // 全部通過，執行提交邏輯
        document.getElementById('myForm').submit();
        // 或 AJAX 提交
        // fetch('/api/submit', { method: 'POST', body: new FormData(form) });
        alert('提交成功');
    }
    // 否則不執行任何提交，函數自然結束
}

關鍵點解析

進階：HTML5 原生驗證 (無需 JS)

<form id="myForm" action="/submit" method="post">
    <input type="text" name="username" required />
    <input type="email" name="email" required />
    <button type="submit">提交</button>
</form>

瀏覽器會自動攔截空值並提示，零 JS 代碼。現代項目首選原生驗證 + 服務端二次校驗。

最佳實踐總結

1. 優先使用 HTML5 required、type="email/number" 等原生屬性
2. JS 驗證採用「標誌變量 + break + 循環後統一處理」模式
3. 複雜表單可引入 Validator.js、Yup 或框架內置驗證 (Vue/VeeValidate, React/Hook Form)

理解「循環驗證與提交分離」的邏輯，能避開 90% 的表單提交坑。