如何使用JavaScript和HTML显示验证后输入的用户名

<form>
  <input type="text" id="username" placeholder="请输入用户名">
  <button type="button" onclick="validateUsername()">验证</button>
</form>

function validateUsername() {
  var username = document.getElementById("username").value;
  
  // 进行用户名验证的逻辑判断
  if (username === "") {
    alert("用户名不能为空");
  } else {
    alert("用户名验证通过：" + username);
  }
}

<div id="displayUsername"></div>

function validateUsername() {
  var username = document.getElementById("username").value;
  
  // 进行用户名验证的逻辑判断
  if (username === "") {
    alert("用户名不能为空");
  } else {
    document.getElementById("displayUsername").innerHTML = "验证通过的用户名：" + username;
  }
}