单选按钮选中时的文本框验证实现方案咨询

核心思路是根据单选按钮的选中状态，动态修改文本框的验证规则，以下是几种实用的实现方式：

1. 原生JavaScript实现（无依赖） #

先搭建基础HTML结构，再通过JS监听单选按钮切换事件，动态控制文本框的必填属性：

<form id="submitForm">
  <label>
    <input type="radio" name="selectOption" value="A" checked> 选项A（需填写Name）
  </label>
  <label>
    <input type="radio" name="selectOption" value="B"> 选项B（Name可空）
  </label>
  <br>
  <label>Name: <input type="text" id="nameText" required></label>
  <br>
  <button type="submit">提交</button>
</form>

<script>
const form = document.getElementById('submitForm');
const optionRadios = document.querySelectorAll('input[name="selectOption"]');
const nameInput = document.getElementById('nameText');

// 监听单选按钮切换，实时调整文本框必填规则
optionRadios.forEach(radio => {
  radio.addEventListener('change', () => {
    nameInput.required = radio.value === 'A';
  });
});

// 提交时二次校验（避免异常情况）
form.addEventListener('submit', (e) => {
  const selectedVal = document.querySelector('input[name="selectOption"]:checked').value;
  if (selectedVal === 'A' && !nameInput.value.trim()) {
    e.preventDefault();
    alert('选中选项A时，Name不能为空');
  }
});
</script>

2. jQuery实现（适用于已引入jQuery的项目） #

逻辑和原生一致，用jQuery语法简化操作：

<!-- 同上面的HTML结构 -->
<script src="jquery.min.js"></script>
<script>
$(function() {
  $('input[name="selectOption"]').on('change', function() {
    $('#nameText').prop('required', $(this).val() === 'A');
  });

  $('#submitForm').on('submit', function(e) {
    const selectedVal = $('input[name="selectOption"]:checked').val();
    if (selectedVal === 'A' && $.trim($('#nameText').val()) === '') {
      e.preventDefault();
      alert('选中选项A时，Name不能为空');
    }
  });
});
</script>

3. HTML5约束验证API（更优雅的原生方式） #

利用浏览器原生的验证机制，自定义验证提示：

<!-- 同上面的HTML结构 -->
<script>
const nameInput = document.getElementById('nameText');
const optionRadios = document.querySelectorAll('input[name="selectOption"]');

function updateValidation() {
  const selectedVal = document.querySelector('input[name="selectOption"]:checked').value;
  if (selectedVal === 'A' && !nameInput.value.trim()) {
    nameInput.setCustomValidity('Name不能为空');
  } else {
    nameInput.setCustomValidity(''); // 清除验证错误
  }
}

// 初始化验证状态
updateValidation();

// 监听单选按钮切换和文本框输入，实时更新验证
optionRadios.forEach(radio => radio.addEventListener('change', updateValidation));
nameInput.addEventListener('input', updateValidation);
</script>

你之前遇到的问题原因 #

只给文本框固定开启了required验证，但没有根据单选按钮的选中状态动态修改这个属性，导致即使选中B，文本框的必填规则仍生效，无法提交。

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