js写用户名和密码非空提示,密码隐藏和显示切换

好的，针对您的问题，我可以提供以下的 JS 代码示例，帮助您实现用户名和密码非空提示，以及密码的隐藏和显示切换功能：

HTML 代码：

<form>
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username">
  <br>
  <label for="password">密码：</label>
  <input type="password" id="password" name="password">
  <span id="show-password" onclick="togglePassword()">显示密码</span>
  <br>
  <input type="submit" value="登录">
</form>

JS 代码：

function togglePassword() {
  var passwordInput = document.getElementById("password");
  var showPassword = document.getElementById("show-password");
  if (passwordInput.type === "password") {
    passwordInput.type = "text";
    showPassword.innerHTML = "隐藏密码";
  } else {
    passwordInput.type = "password";
    showPassword.innerHTML = "显示密码";
  }
}

function validateForm() {
  var usernameInput = document.getElementById("username");
  var passwordInput = document.getElementById("password");
  if (usernameInput.value === "") {
    alert("请输入用户名");
    return false;
  }
  if (passwordInput.value === "") {
    alert("请输入密码");
    return false;
  }
  return true;
}

var form = document.querySelector("form");
form.addEventListener("submit", function(event) {
  event.preventDefault();
  if (validateForm()) {
    alert("登录成功！");
  }
});

上述代码中，`togglePassword()` 函数用于实现密码的隐藏和显示切换功能，当用户点击“显示密码”时，将密码输入框的类型改为文本类型，同时将按钮文本改为“隐藏密码”；当用户再次点击“隐藏密码”时，将密码输入框的类型改为密码类型，同时将按钮文本改为“显示密码”。

`validateForm()` 函数用于校验表单是否填写完整，当用户名或密码为空时，将弹出提示窗口提示用户输入。

最后，我们使用 `addEventListener()` 方法为表单的提交事件添加一个监听器，当用户点击提交按钮时，将先校验表单是否填写完整，如果通过校验则弹出登录成功的提示框。

希望这个代码示例对您有所帮助！