<form id="login-form"> <div class="mb-3"> <div class="input-group" style="margin-left: 23%;margin-right: 23%;"> <span class="input-group-addon"> <span class="glyphicon glyphicon-user"></span> </span> <input type="text" id="username" class="form-control" placeholder="请输入电子邮箱" aria-describedby="sizing-addon2" required minlength="6"> </div> <div class="input-group" style="margin-left: 23%;margin-right: 23%;margin-top: 1%;"> <span class="input-group-addon"> <span class="glyphicon glyphicon-lock"></span> </span> <input type="text" id="password" class="form-control" placeholder="请输入密码" aria-describedby="sizing-addon2" required minlength="6"> </div> </div> </form>请为以上表单添加验证功能，请为以下代码增加表单验证功能，要求用户名和密码不能为空，且至少 6 个字符，当输 入框失去焦点和用户点击登录按钮时必须给出验证提示（用户输入不符合要求时给出提示）

好的，以下是为表单添加验证功能的代码示例：

HTML代码：

<form id="login-form">                             
  <div class="mb-3">
    <div class="input-group" style="margin-left: 23%;margin-right: 23%;">
      <span class="input-group-addon">
        <span class="glyphicon glyphicon-user"></span>
      </span>
      <input type="email" id="username" class="form-control" placeholder="请输入电子邮箱" aria-describedby="sizing-addon2" required minlength="6">
    </div>
    <div class="input-group" style="margin-left: 23%;margin-right: 23%;margin-top: 1%;">
      <span class="input-group-addon">
        <span class="glyphicon glyphicon-lock"></span>
      </span>
      <input type="password" id="password" class="form-control" placeholder="请输入密码" aria-describedby="sizing-addon2" required minlength="6">
    </div>
    <div class="text-danger" id="error-message"></div> <!-- 显示验证失败的错误信息 -->
    <button type="submit" class="btn btn-primary" style="margin-top: 1%;">登录</button> <!-- 登录按钮 -->
  </div>
</form>

JavaScript代码：

$(document).ready(function() {
  // 表单验证
  $('#login-form').validate({
    rules: {
      username: {
        required: true,
        minlength: 6,
        email: true // 验证是否为电子邮箱格式
      },
      password: {
        required: true,
        minlength: 6
      }
    },
    messages: {
      username: {
        required: '请输入电子邮箱',
        minlength: '电子邮箱至少需要6个字符',
        email: '请输入正确的电子邮箱格式'
      },
      password: {
        required: '请输入密码',
        minlength: '密码至少需要6个字符'
      }
    },
    errorElement: 'div', // 错误提示信息使用 div 标签
    errorClass: 'text-danger', // 错误提示信息的样式类
    errorPlacement: function(error, element) {
      error.appendTo($('#error-message')); // 显示错误提示信息到错误信息区域
    },
    submitHandler: function() {
      // 表单验证通过后的处理逻辑
      // 可以在这里进行登录操作
    }
  });

  // 登录按钮的点击事件处理逻辑
  $('button[type="submit"]').click(function() {
    $('#login-form').submit(); // 提交表单
  });
});

这里使用了 jQuery Validation 插件来实现表单验证功能。需要先引入 jQuery 和 jQuery Validation 插件的相关文件。在 JavaScript 代码中，`rules` 属性和 `messages` 属性用来指定验证规则和错误提示信息。`errorElement` 属性和 `errorClass` 属性用来指定错误提示信息使用的标签和样式类。`errorPlacement` 属性用来指定错误提示信息显示的位置。`submitHandler` 属性用来指定表单验证通过后的处理逻辑。在点击登录按钮时，通过调用 `submit()` 方法来提交表单。