如何实现表单输入联动校验：确保成对输入字段完整性

<input name="cas[]" id="ca" type="text" placeholder="输入CA值">
<input name="exams[]" id="exam" type="text" placeholder="输入Exam值">

<button type="submit" id="submit">提交</button>

// 获取DOM元素引用
const caInput = document.getElementById("ca");
const examInput = document.getElementById("exam");
const submitButton = document.getElementById("submit");

/**
 * 校验单个输入对的函数
 * 如果一个有值另一个为空，则返回true（表示不满足提交条件）
 * 否则返回false
 */
function validateSinglePair() {
  const caValue = caInput.value.trim(); // 使用trim()去除首尾空格
  const examValue = examInput.value.trim();

  // 判断是否出现“一个有值，另一个为空”的情况
  if ((caValue !== "" && examValue === "") || (caValue === "" && examValue !== "")) {
    return true; // 不满足提交条件
  }
  return false; // 满足提交条件（都为空或都有值）
}

// 绑定事件监听器
caInput.addEventListener('input', () => {
  submitButton.disabled = validateSinglePair();
});

examInput.addEventListener('input', () => {
  submitButton.disabled = validateSinglePair();
});

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

<input name="cas[]" class="ca-input" type="text" placeholder="CA 1">
<input name="exams[]" class="exam-input" type="text" placeholder="Exam 1">
<br><br>
<input name="cas[]" class="ca-input" type="text" placeholder="CA 2">
<input name="exams[]" class="exam-input" type="text" placeholder="Exam 2">
<br><br>
<input name="cas[]" class="ca-input" type="text" placeholder="CA 3">
<input name="exams[]" class="exam-input" type="text" placeholder="Exam 3">

<button type="submit" id="submit">提交</button>

// 获取所有具有指定类名的输入框
const caInputs = document.getElementsByClassName("ca-input");
const examInputs = document.getElementsByClassName("exam-input");
const submitButton = document.getElementById("submit");
const numberOfPairs = caInputs.length; // 假设caInputs和examInputs长度相同

/**
 * 校验所有输入对的函数
 * 如果任何一对出现“一个有值，另一个为空”的情况，则返回true
 * 否则返回false
 */
function validateAllPairs() {
  for (let i = 0; i < numberOfPairs; i++) {
    const caValue = caInputs[i].value.trim();
    const examValue = examInputs[i].value.trim();

    // 只要有一对不满足条件，就立即返回true
    if ((caValue !== "" && examValue === "") || (caValue === "" && examValue !== "")) {
      return true; // 存在不满足提交条件的对
    }
  }
  return false; // 所有对都满足提交条件
}

// 监听整个文档的输入事件，以捕获所有输入框的变化
// 也可以选择遍历所有输入框并为每个绑定事件，但文档级监听更简洁
document.addEventListener('input', () => {
  submitButton.disabled = validateAllPairs();
});

// 页面加载时执行一次初始校验
document.addEventListener('DOMContentLoaded', () => {
  submitButton.disabled = validateAllPairs();
});