JavaScript表单验证：成对输入框的联动与提交控制

<input type="text" name="itemA" id="inputA" placeholder="输入A">
<input type="text" name="itemB" id="inputB" placeholder="输入B">

<button type="submit" id="submitBtn">提交表单</button>

// 获取DOM元素
const inputA = document.getElementById("inputA");
const inputB = document.getElementById("inputB");
const submitBtn = document.getElementById("submitBtn");

// 定义校验函数
function validatePairedInputs() {
    // 检查条件：如果一个有值，另一个为空，则不符合要求
    const isInvalid = (inputA.value !== "" && inputB.value === "") || 
                      (inputA.value === "" && inputB.value !== "");

    // 根据校验结果禁用或启用提交按钮
    submitBtn.disabled = isInvalid;
}

// 为两个输入框绑定 'input' 事件监听器
// 'input' 事件比 'keyup' 更全面，能捕获粘贴、自动填充等所有输入变化
inputA.oninput = validatePairedInputs;
inputB.oninput = validatePairedInputs;

// 页面加载时执行一次校验，确保初始状态正确
document.addEventListener('DOMContentLoaded', validatePairedInputs);

<div class="input-pair">
    <input type="text" name="itemA[]" class="inputA" placeholder="第一对A">
    <input type="text" name="itemB[]" class="inputB" placeholder="第一对B">
</div>
<br>
<div class="input-pair">
    <input type="text" name="itemA[]" class="inputA" placeholder="第二对A">
    <input type="text" name="itemB[]" class="inputB" placeholder="第二对B">
</div>
<br>
<div class="input-pair">
    <input type="text" name="itemA[]" class="inputA" placeholder="第三对A">
    <input type="text" name="itemB[]" class="inputB" placeholder="第三对B">
</div>

<button type="submit" id="submitBtnMulti">提交所有表单</button>

// 获取所有具有指定class的输入框集合
const inputAs = document.getElementsByClassName("inputA");
const inputBs = document.getElementsByClassName("inputB");
const submitBtnMulti = document.getElementById("submitBtnMulti");
const numOfPairs = inputAs.length; // 假设 inputA 和 inputB 的数量是匹配的

// 校验所有输入对的函数
function checkAllPairsValidity() {
    let allPairsValid = true; // 假设所有对都有效
    for (let i = 0; i < numOfPairs; i++) {
        const currentInputA = inputAs[i];
        const currentInputB = inputBs[i];

        // 如果当前一对满足“一空一不空”的条件，则标记为无效
        if ((currentInputA.value !== "" && currentInputB.value === "") || 
            (currentInputA.value === "" && currentInputB.value !== "")) {
            allPairsValid = false; // 只要有一对无效，就设置整体状态为无效
            break; // 发现一个无效对即可停止检查
        }
    }
    return allPairsValid;
}

// 绑定全局输入事件，当任何输入框有变化时触发
// 这种方式可以捕获页面上所有输入框的输入，然后统一调用校验函数。
// 对于大型表单，更推荐使用事件委托来优化性能。
window.oninput = function() {
    submitBtnMulti.disabled = !checkAllPairsValidity();
};

// 页面加载时执行一次校验，确保初始状态正确
document.addEventListener('DOMContentLoaded', function() {
    submitBtnMulti.disabled = !checkAllPairsValidity();
});