Webforms 验证单选按钮 - HTML

在 Web 开发中，单选按钮是常见的表单控件之一。对于需要输入特定选项的表单，单选按钮通常是一个非常好的选择。然而，如何对单选按钮进行验证是一个重要问题，因为如果用户没有选中按钮，则表单提交时会出现错误。

以下是一组步骤，展示如何验证单选按钮：

1. 在 HTML 中创建单选按钮表单控件

   <form name="myForm">
       <input type="radio" name="gender" value="male"> Male<br>
       <input type="radio" name="gender" value="female"> Female<br>
       <input type="submit" onclick="return validateForm()" value="Submit">
   </form>
   

2. 创建一个 JavaScript 的函数 validateForm()。

   在 validateForm() 函数中，需要检查 whichChecked 单选按钮是否被选中。通过检查该按钮是否被选中，可以验证表单是否有效，如果未选中，则需要一个错误消息提醒用户。

   function validateForm() {
       var radios = document.getElementsByName("gender");
       var whichChecked = null;
       for (var i = 0; i < radios.length; i++) {
           if (radios[i].checked) {
               whichChecked = radios[i].value;
               break;
           }
       }
       if (whichChecked === null) {
           alert("Please select a gender");
           return false;
       }
       return true;
   }
   

3. 将 validateForm() 函数绑定到表单控件的 onSubmit() 事件上。

   <form name="myForm" onSubmit="return validateForm()">
       <input type="radio" name="gender" value="male"> Male<br>
       <input type="radio" name="gender" value="female"> Female<br>
       <input type="submit" value="Submit">
   </form>
   

以上的步骤是验证单选按钮的基本步骤。通过这些步骤，可以轻松地验证单选按钮的表单，并在没有选择单选按钮时向用户反馈错误。