咨询：Bootstrap表单中设置二选一选项的用户体验优化方案

针对你的需求（两个选项非必填，但仅需填写其一），可以从视觉提示、交互约束、表单验证三个维度来实现，让用户清晰感知规则：

1. 视觉分组强化认知 #

把两个选项包裹在一个带明确提示的容器里，用Bootstrap内置样式快速区分关联性：

<div class="border p-3 rounded">
  <h6 class="text-muted mb-3">* 请选择以下其中一种方式提交（可选）</h6>
  
  <div class="form-group row mb-2">
    <label for="txtLink" class="col-sm-3 col-form-label">Enter Link</label>
    <div class="col-sm-9">
      <input class="form-control" data-val="true" id="txtLink" name="enteredLink" type="text" value="">
    </div>
  </div>

  <div class="form-group row">
    <label for="txtFile" class="col-sm-3 col-form-label">Upload File</label>
    <div class="col-sm-9">
      <!-- 修正：文件上传需用type="file"，原text类型不符合需求 -->
      <input class="form-control" id="txtFile" name="enteredFile" type="file">
    </div>
  </div>
</div>

• 用border和p-3把两个选项框成一组，搭配提示文字明确规则
• 调整了文件输入的类型，符合实际上传场景

2. 交互约束防止误操作 #

通过JS实现「填写一个时禁用另一个」，避免用户同时输入：

const linkInput = document.getElementById('txtLink');
const fileInput = document.getElementById('txtFile');

// 监听链接输入变化
linkInput.addEventListener('input', function() {
  fileInput.disabled = this.value.trim() !== '';
  if (this.value.trim() !== '') fileInput.value = ''; // 清空已选文件
});

// 监听文件选择变化
fileInput.addEventListener('change', function() {
  linkInput.disabled = this.files.length > 0;
  if (this.files.length > 0) linkInput.value = ''; // 清空链接输入
});

• 用户输入链接时，自动禁用文件上传框并清空已选内容，反之亦然
• 从交互层面杜绝同时填写两个选项的可能

3. 表单验证保障数据合法性 #

前端验证（原生JS实现） #

function validateForm() {
  const linkVal = document.getElementById('txtLink').value.trim();
  const fileHasContent = document.getElementById('txtFile').files.length > 0;
  
  if (linkVal !== '' && fileHasContent) {
    alert('请仅选择链接或文件其中一种方式提交');
    return false;
  }
  // 都不填或只填一个的情况均允许通过
  return true;
}

后端验证（必做，防止绕过前端限制） #

以C#为例（可根据你的后端语言调整）：

public IActionResult SubmitForm(string enteredLink, IFormFile enteredFile)
{
    if (!string.IsNullOrEmpty(enteredLink) && enteredFile != null)
    {
        ModelState.AddModelError("", "请仅选择链接或文件其中一种方式提交");
        return View();
    }
    // 后续业务逻辑
}

进阶优化：用Radio按钮切换显示 #

如果想让用户先明确选择类型再填写，可以添加Radio按钮控制输入框的显示隐藏：

<div class="border p-3 rounded">
  <h6 class="text-muted mb-3">请选择提交方式（可选）</h6>
  
  <div class="form-check mb-2">
    <input class="form-check-input" type="radio" name="submitType" id="linkType" checked>
    <label class="form-check-label" for="linkType">通过链接提交</label>
  </div>
  <div class="form-group row mb-3" id="linkGroup">
    <label for="txtLink" class="col-sm-3 col-form-label">Enter Link</label>
    <div class="col-sm-9">
      <input class="form-control" data-val="true" id="txtLink" name="enteredLink" type="text" value="">
    </div>
  </div>
  
  <div class="form-check mb-2">
    <input class="form-check-input" type="radio" name="submitType" id="fileType">
    <label class="form-check-label" for="fileType">通过文件提交</label>
  </div>
  <div class="form-group row d-none" id="fileGroup">
    <label for="txtFile" class="col-sm-3 col-form-label">Upload File</label>
    <div class="col-sm-9">
      <input class="form-control" id="txtFile" name="enteredFile" type="file">
    </div>
  </div>
</div>

<script>
const linkTypeRadio = document.getElementById('linkType');
const fileTypeRadio = document.getElementById('fileType');
const linkGroup = document.getElementById('linkGroup');
const fileGroup = document.getElementById('fileGroup');

linkTypeRadio.addEventListener('change', function() {
  linkGroup.classList.remove('d-none');
  fileGroup.classList.add('d-none');
  document.getElementById('txtFile').value = '';
});

fileTypeRadio.addEventListener('change', function() {
  fileGroup.classList.remove('d-none');
  linkGroup.classList.add('d-none');
  document.getElementById('txtLink').value = '';
});
</script>

• 用户先选择提交类型，再显示对应输入框，完全避免误操作
• 用Bootstrap的d-none类控制显示隐藏，样式统一

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