阻止表单自动添加行：输入校验功能优化求助

问题现状 #

当前表单存在两个核心问题：

• 部分输入非法（含字母等非数字）时，仍会为合法输入添加表格行，而非终止整个流程
• 多次点击提交按钮会重复新增行，未完全限制重复提交

期望效果 #

• 只要存在任何非数字输入，立即终止表单处理，不添加任何表格行，直到用户修正所有非法输入
• 提交成功后禁止重复提交，清除表单后恢复可提交状态

修复后的代码 #

HTML部分（保持原结构）

<form id="userInputForm">
    <label for="input1">Input 1:</label>
    <input type="text" id="input1"><br>

    <label for="input2">Input 2:</label>
    <input type="text" id="input2"><br>

    <label for="input3">Input 3:</label>
    <input type="text" id="input3"><br>

    <button type="button" onclick="displayUserInput()">Submit</button>
    <button type="button" onclick="clearInputs()">Clear</button>
</form>

<table id="outputTable">
    <tbody></tbody>
</table>

<p id="averageAmount"></p>

<div id="errorDisplay"></div>

JavaScript部分（核心修改）

let formSubmitted = false;

function displayUserInput() {
    if (formSubmitted) {
        return; // 提交成功后禁止重复提交
    }

    let total = 0;
    const table = document.querySelector("#outputTable tbody");
    const inputs = ["Input 1", "Input 2", "Input 3"];
    const errorDisplay = document.getElementById("errorDisplay");
    errorDisplay.textContent = "";
    // 先收集所有验证通过的输入，避免中途添加行
    const validInputs = [];

    // 改用for循环，遇到错误直接终止整个验证流程
    for (let index = 0; index < inputs.length; index++) {
        const inputLabel = inputs[index];
        const inputField = document.querySelector(`#input${index + 1}`);
        const value = parseFloat(inputField.value);

        if (isNaN(value) || inputField.value.trim() === "") {
            errorDisplay.textContent = `${inputLabel}输入无效，请输入数字。`;
            
            setTimeout(() => {
                errorDisplay.textContent = "";
            }, 3000);
            // 终止整个函数，不再执行后续逻辑
            return;
        }

        validInputs.push({ label: inputLabel, value: value });
        total += value;
    }

    // 所有输入验证通过后，统一添加表格行
    validInputs.forEach(item => {
        const row = table.insertRow();
        row.insertCell(0).textContent = item.label;
        row.insertCell(1).textContent = item.value;
    });

    const average = total / inputs.length;
    document.getElementById("averageAmount").textContent = `Average Amount: ${average}`;
    formSubmitted = true; // 标记提交成功，禁止重复提交
}

function clearInputs() {
    const inputFields = document.querySelectorAll("input[type='text']");
    inputFields.forEach((inputField) => {
        inputField.value = "";
    });
    document.getElementById("errorDisplay").textContent = "";
    document.getElementById("averageAmount").textContent = "";
    document.querySelector("#outputTable tbody").innerHTML = "";
    formSubmitted = false; // 重置提交状态
}

function clearError() {
    document.getElementById("errorDisplay").textContent = "";
}

关键修改说明 #

• 替换循环方式：将forEach改为for循环，遇到非法输入时直接return终止整个函数，避免forEach仅跳过当前迭代、继续处理后续输入的问题
• 先验证后渲染：先收集所有合法输入到validInputs数组，验证全部通过后再统一添加表格行，确保任何非法输入都不会产生部分行
• 严格输入校验：新增空值判断（inputField.value.trim() === ""），避免空输入被误判为有效
• 强化提交限制：确保只有全部验证通过后才会标记formSubmitted = true，避免非法提交后误锁表单

内容的提问来源于stack exchange，提问作者JDEV