如何使用jQuery Validation将所有验证错误展示在单个含li的div中？

我明白你想把所有jQuery Validate的表单验证错误，都集中展示在单个<div>容器下的<li>元素里。你的代码已经有了核心思路，我来帮你完善并修正细节，实现你要的效果：

第一步：准备HTML结构 #

首先确保页面上有用于集中展示错误的容器，以及你的登录表单：

<!-- 错误信息容器 -->
<div class="error_container">
  <ul id="error_list"></ul>
</div>

<!-- 登录表单 -->
<form id="login_form">
  <input type="text" name="username" placeholder="Enter username">
  <input type="password" name="password" placeholder="Enter password">
  <button type="submit">Login</button>
</form>

第二步：完善jQuery Validate配置 #

这里需要调整showErrors方法，同时禁用插件的默认错误展示逻辑，确保所有错误都集中到我们指定的容器中：

$("#login_form").validate({
  // 自定义错误展示逻辑
  showErrors: function(errorMap, errorList) {
    const $errorContainer = $(".error_container");
    const $errorList = $("#error_list");
    
    // 先清空之前的错误内容
    $errorList.html('');
    
    // 如果存在验证错误
    if (this.numberOfInvalids() > 0) {
      // 遍历所有错误，添加到ul的li中
      $.each(errorList, function(index, error) {
        $errorList.append(`<li>${error.message}</li>`);
      });
      // 显示错误容器
      $errorContainer.show();
    } else {
      // 没有错误则隐藏容器
      $errorContainer.hide();
    }
  },
  // 表单验证规则
  rules: {
    username: { required: true },
    password: { required: true }
  },
  // 自定义错误提示文本
  messages: {
    username: { required: "Please enter username." },
    password: { required: "Please enter password." }
  },
  // 禁用插件默认的错误标签插入行为
  errorPlacement: function() {},
  // 这里的errorElement可以保留，但因为我们自己生成li，其实也可以省略
  errorElement: 'li'
});

第三步：添加基础样式（可选） #

给错误容器加一点样式，让提示更直观：

.error_container {
  display: none;
  margin: 10px 0;
  padding: 12px;
  background-color: #ffebee;
  border: 1px solid #ef5350;
  border-radius: 4px;
}

.error_container ul {
  margin: 0;
  padding-left: 20px;
  color: #c62828;
}

关键说明 #

• 去掉了this.defaultShowErrors()：这个方法会触发插件默认的错误展示（比如在表单元素旁显示错误），和我们的集中展示需求冲突，所以需要移除。
• 新增errorPlacement: function() {}：阻止插件自动把错误标签插入到表单元素旁边，确保所有错误都由我们的自定义逻辑处理。
• 遍历errorList：这个数组里包含了所有验证失败的字段和对应的错误消息，我们直接把消息渲染成<li>添加到指定列表中。

内容的提问来源于stack exchange，提问作者Akshay Deshmukh