如何基于Bootstrap实现类XNOR逻辑的表单输入验证

Bootstrap的内置表单验证规则确实没有覆盖这种“两个字段要么都为空，要么都填写”的场景，我们可以通过结合Bootstrap的验证样式类+自定义JavaScript逻辑来实现这个需求。

完整实现代码 #

<form class="needs-validation novalidate">
  <div class="mb-3">
    <input type="text" class="form-control" name="input1" id="input1">
    <div class="invalid-feedback">请同时填写两个字段，或都不填写</div>
  </div>
  <div class="mb-3">
    <input type="text" class="form-control" name="input2" id="input2">
    <div class="invalid-feedback">请同时填写两个字段，或都不填写</div>
  </div>
  <button type="submit" class="btn btn-primary">submit</button>
</form>

<script>
// 获取表单和输入框元素
const form = document.querySelector('.needs-validation');
const input1 = document.getElementById('input1');
const input2 = document.getElementById('input2');

// 自定义验证函数
function validateFields() {
  const val1 = input1.value.trim();
  const val2 = input2.value.trim();
  const isInvalid = (val1 && !val2) || (!val1 && val2);

  // 给输入框添加/移除Bootstrap验证样式
  input1.classList.toggle('is-invalid', isInvalid);
  input2.classList.toggle('is-invalid', isInvalid);
  
  // 验证通过返回true，否则false
  return !isInvalid;
}

// 监听表单提交事件
form.addEventListener('submit', function (e) {
  if (!validateFields()) {
    e.preventDefault();
    e.stopPropagation();
  }
  form.classList.add('was-validated');
});

// 可选：监听输入事件，实时验证提升用户体验
input1.addEventListener('input', validateFields);
input2.addEventListener('input', validateFields);
</script>

关键逻辑说明 #

1. Bootstrap样式集成：使用needs-validation、novalidate、is-invalid、invalid-feedback这些Bootstrap原生类，保证验证提示的样式和Bootstrap风格一致。
2. 核心验证判断：通过(val1 && !val2) || (!val1 && val2)判断是否出现“仅填写一个字段”的情况，这种情况下标记字段为无效。
3. 实时验证（可选）：给输入框添加input事件监听，用户输入时实时更新验证状态，避免提交时才提示错误。
4. 表单提交拦截：在表单提交时触发验证，若验证不通过则阻止默认提交行为，并添加was-validated类触发Bootstrap的验证样式展示。

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