HTML表单数据怎么动态验证_HTML根据条件动态验证表单数据的实现方法

<form id="myForm">
  <label>
    <input type="radio" name="type" value="personal" checked> 个人
  </label>
  <label>
    <input type="radio" name="type" value="company"> 企业
  </label>

  <input type="text" id="idCard" placeholder="身份证号">
  <input type="text" id="businessLicense" placeholder="营业执照号" disabled>

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

<script>
const form = document.getElementById('myForm');
const idCard = document.getElementById('idCard');
const license = document.getElementById('businessLicense');

// 监听类型切换
form.querySelectorAll('input[name="type"]').forEach(radio => {
  radio.addEventListener('change', function() {
    if (this.value === 'personal') {
      idCard.required = true;
      license.required = false;
      license.disabled = true;
    } else {
      idCard.required = false;
      license.required = true;
      license.disabled = false;
    }
  });
});

// 初始状态设置
form.querySelector('input[value="personal"]').dispatchEvent(new Event('change'));

form.addEventListener('submit', function(e) {
  if (!form.checkValidity()) {
    e.preventDefault();
    alert('请填写必填项！');
  }
});
</script>

<input type="password" id="password" placeholder="密码">
<input type="password" id="confirmPassword" placeholder="确认密码">

<script>
const pwd = document.getElementById('password');
const cpwd = document.getElementById('confirmPassword');

cpwd.addEventListener('input', function() {
  if (pwd.value !== cpwd.value) {
    cpwd.setCustomValidity('两次密码不一致');
  } else {
    cpwd.setCustomValidity('');
  }
});
</script>

<input 
  type="text" 
  data-validate-if="type=company" 
  data-rule="length:6-20" 
  placeholder="请输入企业编号" 
>