Validate user input before login submission

HTML

<form id="login-form">
  <label>
    使用者名稱：
    <input type="text" id="username">
    <span class="error-message" id="username-error"></span>
  </label><br>

  <label >
    密碼：
    <input type="password" id="password">
    <span class="error-message" id="password-error"></span>
  </label><br>

  <label >
    Email信箱：
    <input type="email" id="email">
    <span class="error-message" id="email-error"></span>

  </label>

  <button type="submit">登入</button>

</form>

CSS

* {
  box-sizing: border-box;

}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 500px;
}
.error-message {
  color: red;
  font-size: 0.8rem;
  display: none;
}

input.invalid {
  border: 1px solid red;
}

JavaScript

document.querySelector('#login-form').addEventListener('submit' , function(e) {
  e.preventDefault();
  const username = document.querySelector('#username');
  const password = document.querySelector('#password');
  const email = document.querySelector('#email');

  const usernameError = document.querySelector('#username-error');
  const passwordError = document.querySelector('#password-error');
  const emailError =document.querySelector('#email-error');

  let valid = true;
  if (username.value.trim() === '' || username.value.length > 40) {
    username.classList.add('invalid');
    usernameError.textContent = '請輸入使用者名稱(必須在40字以內)';
    usernameError.style.display = 'inline';
    valid = false;
  }else {
    username.classList.remove('invalid');
    usernameError.textContent = '';
    usernameError.style.display = 'none';
  }

  if (password.value.length < 8  || password.value.length > 100) {
    password.classList.add('invalid');
    passwordError.textContent = '密碼需要介於8~100字元';
    passwordError.style.display = 'inline';
    valid = false;
  }else {
    password.classList.remove('invalid');
    passwordError.textContent = '';
    passwordError.style.display = 'none';
  }

  if ( !email.value.includes('@')) {
    email.classList.add('invalid');
    emailError.textContent = '請輸入有效的email(必須包含@)';
    emailError.style.display = 'inline';
  } else {
    email.classList.remove('invalid');
    emailError.textContent = '';
    emailError.style.display = 'none';
  }

  if (valid) {
    alert('登入成功!');
  }
})