HTML | DOM Input Radio required 属性

简介

在HTML表单中，radio input类型用于让用户选择一个选项，而required属性则用于指定该输入控件必须填写，否则表单将无法提交。当使用了required属性且该radio按钮组中没有选项被选中时，HTML表单验证机制会发现未选择任何选项而阻止表单提交。

使用

使用required属性只需在radio input元素上添加required属性即可。

<form>
  <input type="radio" name="radio-group" value="option1" required> Option 1
  <input type="radio" name="radio-group" value="option2"> Option 2
  <input type="radio" name="radio-group" value="option3"> Option 3
  <button type="submit">Submit</button>
</form>

注意：所有选项都应该有相同的name属性，这样它们才能被视为一组。

当用户尝试提交表单时，如果必填的radio按钮没有被选中，浏览器会显示默认的错误提示。可以通过添加oninvalid属性来自定义验证错误提示信息。

<form>
  <input type="radio" name="radio-group" value="option1" required> Option 1
  <input type="radio" name="radio-group" value="option2"> Option 2
  <input type="radio" name="radio-group" value="option3"> Option 3
  <button type="submit">Submit</button>
  <div class="invalid-feedback" style="display:none">Please select an option.</div>
</form>

<script>
  const radios = document.querySelectorAll('input[type="radio"]');
  radios.forEach(radio => {
    radio.addEventListener('invalid', event => {
      event.preventDefault();
      document.querySelector('.invalid-feedback').style.display = 'block';
    });
  });
</script>

兼容性

required属性与HTML5一起推出，现在已被所有现代浏览器支持，如Chrome，Firefox，Edge，Safari和Opera。

使用required属性的兼容性问题主要出现在IE9及更早版本中，这些浏览器不支持该属性。对于这些浏览器，可以使用JavaScript来进行验证。

结论

使用required属性可以确保用户必须选择一项，从而避免错误或无效的表单提交。不过在使用时要注意兼容性问题，以确保在不支持该属性的浏览器上也可以进行验证。同时，可以使用JavaScript来进行自定义验证错误提示信息。