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

好的，我可以为你提供代码示例，下面是一个简单的实现方式：

HTML 代码：

<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 id="toggle-password">显示密码</button>

JavaScript 代码：

const passwordInput = document.getElementById('password');
const togglePasswordButton = document.getElementById('toggle-password');

togglePasswordButton.addEventListener('click', () => {
  if (passwordInput.type === 'password') {
    passwordInput.type = 'text';
    togglePasswordButton.textContent = '隐藏密码';
  } else {
    passwordInput.type = 'password';
    togglePasswordButton.textContent = '显示密码';
  }
});

这段代码中，我们首先获取了用户名和密码输入框的引用，以及切换密码显示状态的按钮。然后监听按钮的点击事件，根据密码输入框的当前状态，切换密码输入框的 type 属性值和按钮的文本内容，从而实现密码的隐藏和显示切换。此外，我们还使用了 HTML5 的 required 属性来设置用户名和密码为必填项，确保用户输入非空值。