单击结果出现然后自动刷新

on click the result appears then auto refreshes

document.querySelector('.login').addEventListener('click', function() {
  const check = document.querySelector('.username').value;
  console.log(typeof check);

  if (!check) {
    document.querySelector('.errorMessage').textContent =
      'kindly enter your username';
  }
});
<div class="user-login">
  <form>
    <label for="">User Name :  <input type="text" name="userName" class=" username"></label> <br>
    <label for="">Password:  <input type="password" name="" class="password"></label> <br>
    <button class="login">Login</button>
  </form>
</div>

<div class="errorMessage">
  <label for=""></label> <br>
</div>

把你的html按钮修改成这样:

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

或者在您的 javascript 中,您可以这样做:

document.querySelector('.login').addEventListener('click', function(e) {
    e.preventDefault(); // Add this after set 'e' as parameter
    const check = document.querySelector('.username').value;
    console.log(typeof check);

    if (!check) {
       document.querySelector('.errorMessage').textContent =
       'kindly enter your username';
    }
});