HTML 表单验证：姓名、性别、证件、密码和手机号

<form>
  <label for='name'>姓名：</label>
  <input type='text' id='name' name='name'><br><br>
<p><label for='gender'>性别：</label>
<input type='radio' id='male' name='gender' value='male'>
<label for='male'>男</label>
<input type='radio' id='female' name='gender' value='female'>
<label for='female'>女</label><br><br></p>
<p><label for='idType'>证件类型：</label>
<select id='idType' name='idType'>
<option value='1'>身份证</option>
<option value='2'>护照</option>
<option value='3'>驾驶证</option>
</select><br><br></p>
<p><label for='idNumber'>证件号码：</label>
<input type='text' id='idNumber' name='idNumber'><br><br></p>
<p><label for='password'>密码：</label>
<input type='password' id='password' name='password'><br><br></p>
<p><label for='phoneNumber'>手机号：</label>
<input type='text' id='phoneNumber' name='phoneNumber'><br><br></p>
  <input type='submit' value='提交'>
</form>
<script>
  const form = document.querySelector('form');
  const name = document.getElementById('name');
  const gender = document.getElementsByName('gender');
  const idType = document.getElementById('idType');
  const idNumber = document.getElementById('idNumber');
  const password = document.getElementById('password');
  const phoneNumber = document.getElementById('phoneNumber');

  form.addEventListener('submit', function(e) {
    e.preventDefault();

    // 校验姓名
    if (name.value === '') {
      alert('姓名不能为空！');
      return;
    }

    // 校验性别
    let selectedGender = '';
    for (let i = 0; i < gender.length; i++) {
      if (gender[i].checked) {
        selectedGender = gender[i].value;
        break;
      }
    }
    if (selectedGender === '') {
      alert('请选择性别！');
      return;
    }

    // 校验证件号码
    if (idNumber.value === '') {
      alert('证件号码不能为空！');
      return;
    }

    // 校验密码
    if (password.value === '') {
      alert('密码不能为空！');
      return;
    }

    // 校验手机号
    if (phoneNumber.value === '') {
      alert('手机号不能为空！');
      return;
    }
    const phoneRegex = /^[1][3,4,5,7,8][0-9]{9}$/;
    if (!phoneRegex.test(phoneNumber.value)) {
      alert('手机号格式不正确！');
      return;
    }

    // 提交表单
    form.submit();
  });
</script>