HTML表单如何用JS验证？input事件与正则表达式应用

<form id="myForm">
  <label for="email">邮箱:</label>
  <input type="email" id="email" name="email">
  <span id="emailError" style="color: red;"></span><br><br>

  <label for="password">密码:</label>
  <input type="password" id="password" name="password">
  <span id="passwordError" style="color: red;"></span><br><br>

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

<script>
  const form = document.getElementById('myForm');
  const emailInput = document.getElementById('email');
  const passwordInput = document.getElementById('password');
  const emailError = document.getElementById('emailError');
  const passwordError = document.getElementById('passwordError');

  form.addEventListener('submit', function(event) {
    let isValid = true;

    // 邮箱验证
    if (!validateEmail(emailInput.value)) {
      emailError.textContent = '邮箱格式不正确';
      isValid = false;
      event.preventDefault(); // 阻止表单提交
    } else {
      emailError.textContent = '';
    }

    // 密码验证 (假设密码至少8位)
    if (passwordInput.value.length < 8) {
      passwordError.textContent = '密码至少需要8位';
      isValid = false;
      event.preventDefault(); // 阻止表单提交
    } else {
      passwordError.textContent = '';
    }

    if (!isValid) {
      event.preventDefault(); // 确保如果之前有错误，仍然阻止提交
    }
  });

  function validateEmail(email) {
    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return re.test(email);
  }
</script>

<input type="text" id="username" name="username">
<span id="usernameError" style="color: red;"></span>

<script>
  const usernameInput = document.getElementById('username');
  const usernameError = document.getElementById('usernameError');

  usernameInput.addEventListener('input', function(event) {
    const username = event.target.value;

    if (username.length < 3) {
      usernameError.textContent = '用户名至少需要3个字符';
    } else {
      usernameError.textContent = '';
    }
  });
</script>

function validatePhoneNumber(phoneNumber) {
  const re = /^1[3456789]\d{9}$/; // 中国大陆手机号码
  return re.test(phoneNumber);
}

<input type="text" id="username" name="username">
<span id="usernameError" style="color: red;"></span>

<script>
  const usernameInput = document.getElementById('username');
  const usernameError = document.getElementById('usernameError');

  usernameInput.addEventListener('blur', async function(event) { // 使用 blur 事件，在失去焦点时验证
    const username = event.target.value;

    try {
      const response = await fetch(`/api/checkUsername?username=${username}`); // 假设后端接口是 /api/checkUsername
      const data = await response.json();

      if (data.exists) {
        usernameError.textContent = '用户名已存在';
      } else {
        usernameError.textContent = '';
      }
    } catch (error) {
      console.error('Error checking username:', error);
      usernameError.textContent = '验证失败，请稍后再试';
    }
  });
</script>

<input type="email" id="email" name="email" aria-describedby="emailHelp">
<small id="emailHelp" class="form-text text-muted">请输入您的邮箱地址。</small>
<span id="emailError" role="alert" style="color: red;"></span>