如何阻止成对输入仅填一项时的表单提交？支持多组输入

AI 小北

2026-8-18

实现输入框对的联动校验（支持多组）

核心校验规则

两个输入框需满足：要么同时为空，要么同时填写内容，若仅填写其中一个，则阻止表单提交。

单组输入框的实现

基于你提供的HTML结构，通过监听提交事件完成校验：

HTML 代码

<input name="cas[]" id="ca">
<input name="exams[]" id="exam">

<button type="submit" id="submit">Submit</button>

JavaScript 代码

document.getElementById('submit').addEventListener('click', function(e) {
  // 获取输入值并去除首尾空格
  const caValue = document.getElementById('ca').value.trim();
  const examValue = document.getElementById('exam').value.trim();

  // 校验：一个有值另一个为空时阻止提交
  if ((caValue && !examValue) || (!caValue && examValue)) {
    e.preventDefault();
    alert('请同时填写两个输入框，或都不填写');
  }
});

多组输入框的实现

给每组输入框添加统一容器，方便批量遍历校验：

HTML 代码

<!-- 第一组 -->
<div class="input-pair">
  <input name="cas[]" class="ca-input">
  <input name="exams[]" class="exam-input">
</div>

<!-- 第二组 -->
<div class="input-pair">
  <input name="cas[]" class="ca-input">
  <input name="exams[]" class="exam-input">
</div>

<button type="submit" id="submit">Submit</button>

JavaScript 代码

document.getElementById('submit').addEventListener('click', function(e) {
  let isValid = true;
  const inputPairs = document.querySelectorAll('.input-pair');

  // 遍历每组输入框校验
  inputPairs.forEach(pair => {
    const caValue = pair.querySelector('.ca-input').value.trim();
    const examValue = pair.querySelector('.exam-input').value.trim();

    if ((caValue && !examValue) || (!caValue && examValue)) {
      isValid = false;
      alert('存在未完整填写的输入组，请检查');
      pair.querySelector('.ca-input').focus(); // 定位到问题输入框
    }
  });

  if (!isValid) e.preventDefault();
});