在单击按钮时使用javascript提交时显示验证错误

<form id="loginForm">
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username" required>
  
  <label for="password">密码:</label>
  <input type="password" id="password" name="password" required>
  
  <button type="submit">登录</button>
</form>

document.getElementById("loginForm").addEventListener("submit", function(event) {
  event.preventDefault(); // 阻止表单默认提交行为
  
  // 获取表单字段的值
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;
  
  // 进行验证
  if (username === "") {
    displayError("请输入用户名");
    return;
  }
  
  if (password === "") {
    displayError("请输入密码");
    return;
  }
  
  // 验证通过，可以提交表单
  submitForm();
});

function displayError(message) {
  // 显示错误消息
  var errorElement = document.getElementById("error");
  errorElement.innerHTML = message;
}

function submitForm() {
  // 提交表单的逻辑
  // 可以在这里使用AJAX或其他方式将表单数据发送到服务器
}

<div id="error"></div>