前端用户性别怎么校验

前端用户性别校验可以通过表单验证来实现。可以使用 HTML5 中的 `required` 属性来要求用户必须填写性别，并使用 JavaScript 来验证用户选择的性别是否合法。

HTML 代码：

<form>
  <label>
    <input type="radio" name="gender" value="male" required>
    Male
  </label>
  <label>
    <input type="radio" name="gender" value="female" required>
    Female
  </label>
  <br>
  <button type="submit">Submit</button>
</form>

在上面的代码中，我们在单选框元素中添加了 `required` 属性，表示这个单选框必须选中。这样，当用户未选中单选框时，浏览器会弹出提示框，提醒用户必须选中单选框。

JavaScript 代码：

const form = document.querySelector('form');
const radios = form.elements.gender;

form.addEventListener('submit', (event) => {
  let isChecked = false;
  for (let i = 0; i < radios.length; i++) {
    if (radios[i].checked) {
      isChecked = true;
      break;
    }
  }
  if (!isChecked) {
    alert('Please select a gender.');
    event.preventDefault();
  } else if (radios.value !== 'male' && radios.value !== 'female') {
    alert('Invalid gender selected.');
    event.preventDefault();
  }
});

在上面的代码中，我们在表单提交事件中检查用户是否选择了性别，并且是否选择了有效的性别。如果用户未选择性别，则弹出提示框；如果用户选择的不是有效性别，则同样弹出提示框。如果一切正常，则表单提交。