点击登录按钮后校验提示出现随即页面自动刷新问题求解

form标签内部的button元素默认type为submit，点击时会触发表单默认提交行为，浏览器会自动提交表单并刷新当前页面，所以你设置的错误提示刚渲染完成，就被页面刷新操作清空了。

有两种常用的解决方式，可根据实际场景选择：

• 方案1：在点击事件回调中阻止默认行为
  在click事件的回调函数中接收事件对象，调用e.preventDefault()阻止表单默认提交逻辑，同时可以对用户名输入做trim处理，避免空格字符绕过非空校验：

document.querySelector('.login').addEventListener('click', function(e) {
  // 阻止表单默认提交刷新行为
  e.preventDefault()
  const check = document.querySelector('.username').value.trim();
  console.log(typeof check);

  if (!check) {
    document.querySelector('.errorMessage').textContent =
      'kindly enter your username';
    // 校验不通过直接终止后续逻辑
    return
  }
  // 此处可写校验通过后的登录逻辑
});

• 方案2：修改按钮的type属性
  将form内的登录按钮type显式设置为button，按钮就不会默认触发表单提交行为：

<button type="button" class="login">Login</button>

如果后续校验完成需要提交表单，可手动调用form元素的submit()方法完成提交。

内容的提问来源于stack exchange，提问作者George Njue