html界面添加验证功能,验证用户名和密码不能为空,且至少 6 个字符,当输 入框失去焦点和用户点击登录按钮时必须给出验证提示

您可以使用JavaScript来实现这个验证功能，以下是一个示例：

HTML代码：

<form>
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username"><br><br>
  <label for="password">密码：</label>
  <input type="password" id="password" name="password"><br><br>
  <input type="button" value="登录" onclick="validateForm()">
</form>
<div id="error-message"></div>

JavaScript代码：

function validateForm() {
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;
  var errorMessage = document.getElementById("error-message");
  
  if (username == "" || password == "") {
    errorMessage.innerHTML = "用户名和密码不能为空";
    return false;
  }
  
  if (username.length < 6 || password.length < 6) {
    errorMessage.innerHTML = "用户名和密码长度必须至少为6个字符";
    return false;
  }
  
  errorMessage.innerHTML = "";
  return true;
}

var usernameInput = document.getElementById("username");
var passwordInput = document.getElementById("password");

usernameInput.addEventListener("blur", validateForm);
passwordInput.addEventListener("blur", validateForm);

上述代码中，我们首先获取了表单中的用户名和密码输入框，以及错误提示信息的div元素。然后定义了一个validateForm()函数，用于验证表单是否合法。在函数中，我们首先判断用户名和密码是否为空，如果是，则显示错误提示信息并返回false，表示表单不合法。然后判断用户名和密码的长度是否至少为6个字符，如果不是，则同样显示错误提示信息并返回false。最后，如果表单合法，则清空错误提示信息并返回true。

接着，我们使用addEventListener()方法为用户名和密码输入框添加了一个失去焦点事件的监听器，在用户离开输入框时自动验证表单的合法性。另外，我们还使用了onclick事件，为登录按钮添加了一个点击事件的监听器，在用户点击登录按钮时也会进行表单验证。如果表单不合法，则不会提交表单，而是显示错误提示信息。