動態添加文本框後的格式驗證與數據提交完整指南

場景描述

在 Web 表單開發中，常見需求是允許用戶動態添加多組「文件上傳 + URL 輸入」字段，並在提交前進行格式驗證。本文將分析一個典型的 jQuery 實現案例，指出其中的問題並提供優化方案。

原始代碼問題分析

提供的 JavaScript 代碼存在多個關鍵問題：

1. 選擇器語法錯誤：`$("input type='file' ...` 缺少標籤名，應為 `$("<input type='file' ...`
2. 字符串拼接錯誤：`name='url“+n+”'` 使用了智能引號，導致屬性值解析失敗
3. 驗證邏輯缺陷：`f (f.myfiles[i].value == '')` 缺少 `if` 關鍵字
4. 正則表達式過於簡單：`/^https?:\/\/.+?\.com$/` 僅匹配 .com 域名，不支持 .cn、.net 等
5. DOM 操作效率低：頻繁調用 `after()` 且未使用文檔片段

優化後的完整實現

HTML 結構

<form id="uploadForm" action="<%=request.getContextPath()%>/add.do" method="POST" enctype="multipart/form-data">
    <div id="fileGroups">
        <div class="file-group">
            <input type="file" name="myfiles" class="file-input" required />
            <label>網站地址:</label>
            <input type="url" name="url" class="url-input" placeholder="https://example.com" />
            <button type="button" class="btn btn-danger remove-btn">刪除</button>
        </div>
    </div>
    <button type="button" id="addMore" class="btn btn-info">添加更多</button>
    <button type="submit" class="btn btn-success">確認提交</button>
</form>

JavaScript 驗證邏輯（ES6+ 寫法）

document.addEventListener('DOMContentLoaded', () => {
    const form = document.getElementById('uploadForm');
    const container = document.getElementById('fileGroups');
    const addBtn = document.getElementById('addMore');
    let groupCount = 1;

    // 添加新組
    addBtn.addEventListener('click', () => {
        groupCount++;
        const group = document.createElement('div');
        group.className = 'file-group';
        group.innerHTML = `
            <input type="file" name="myfiles" class="file-input" required />
            <label>網站地址:</label>
            <input type="url" name="url" class="url-input" placeholder="https://example.com" />
            <button type="button" class="btn btn-danger remove-btn">刪除</button>
        `;
        container.appendChild(group);
        
        // 綁定刪除事件
        group.querySelector('.remove-btn').addEventListener('click', (e) => {
            if (container.children.length > 1) {
                e.target.closest('.file-group').remove();
            } else {
                alert('至少保留一組輸入框');
            }
        });
    });

    // 表單提交驗證
    form.addEventListener('submit', (e) => {
        const groups = container.querySelectorAll('.file-group');
        let valid = true;
        
        groups.forEach((group, index) => {
            const fileInput = group.querySelector('.file-input');
            const urlInput = group.querySelector('.url-input');
            
            if (!fileInput.value) {
                alert(`第 ${index + 1} 組：請選擇文件！`);
                fileInput.focus();
                valid = false;
                return;
            }
            
            if (urlInput.value && !isValidUrl(urlInput.value)) {
                alert(`第 ${index + 1} 組：URL 格式不正確！`);
                urlInput.focus();
                valid = false;
                return;
            }
        });
        
        if (!valid) e.preventDefault();
    });
});

// URL 格式驗證（支持常見頂級域名）
function isValidUrl(url) {
    const pattern = /^https?:\/\/([\w-]+\.)+[\w-]+(\/[\w-./?%&=]*)?$/i;
    return pattern.test(url);
}

關鍵改進點

• 語義化 HTML：使用 `` 利用瀏覽器原生驗證
• 事件委託優化：動態綁定刪除事件，避免內存洩漏
• 健壯的 URL 正則：支持多級域名、路徑、查詢參數
• 用戶體驗提升：清晰的錯誤提示、防止誤刪最後一組
• 現代 JS 語法：箭頭函數、模板字符串、const/let

後端接收建議

後端（Java/Servlet）接收時，`myfiles` 和 `url` 將作為數組接收：

// Java 示例
String[] files = request.getParameterValues("myfiles");
String[] urls = request.getParameterValues("url");
// 配合 multipart 解析器（如 Apache Commons FileUpload）處理文件上傳

總結

動態表單的關鍵在於：結構化的 DOM 操作、完善的前端驗證、與後端數組參數的對應。避免使用過時的 jQuery 字符串拼接方式，採用現代原生 JS 或成熟框架（Vue/React）會讓代碼更易維護、擴展性更強。