字段验证错误显示功能说明

功能概述

前端用户管理页面现在支持显示后端返回的详细字段验证错误信息，提供更好的用户体验。

功能特性

1. 字段级错误显示

• 当后端返回 400 状态码和详细的字段错误信息时，前端会自动解析并在对应字段下方显示错误信息
• 支持的错误格式：{"code":400,"message":"参数验证失败","data":{"email":"邮箱格式不正确"}}

2. 视觉反馈

• 有错误的字段会显示红色边框
• 错误信息以红色文字显示在字段下方
• 错误信息字体较小，不影响整体布局

3. 错误清除机制

• 打开新增/编辑对话框时自动清除之前的错误信息
• 重新提交表单时清除之前的错误信息

支持的字段

以下字段支持错误显示：

• username - 用户名
• realName - 真实姓名
  
• phone - 手机号
• email - 邮箱
• remark - 备注

后端错误格式要求

后端需要返回以下格式的错误信息：

{
  "code": 400,
  "message": "参数验证失败",
  "data": {
    "username": "用户名已存在",
    "email": "邮箱格式不正确",
    "phone": "手机号格式不正确"
  }
}

使用示例

1. 邮箱格式错误

当用户输入无效邮箱时：

• 邮箱输入框显示红色边框
• 输入框下方显示"邮箱格式不正确"

2. 用户名重复

当用户名已存在时：

• 用户名输入框显示红色边框
  
• 输入框下方显示"用户名已存在"

3. 多个字段错误

当多个字段都有错误时：

• 所有有错误的字段都会显示红色边框
• 每个字段下方显示对应的错误信息

技术实现

1. 响应式错误状态

const fieldErrors = reactive<Record<string, string>>({})

2. 错误解析函数

const parseFieldErrors = (errorData: any) => {
  clearFieldErrors()

  if (errorData && typeof errorData === 'object') {
    Object.keys(errorData).forEach(field => {
      fieldErrors[field] = errorData[field]
    })
  }
}

3. 模板绑定

<input 
  v-model="userForm.email" 
  type="email" 
  class="form-input" 
  :class="{ 'error': fieldErrors.email }"
/>
<div v-if="fieldErrors.email" class="field-error">{{ fieldErrors.email }}</div>

样式说明

错误状态样式

.form-input.error, .form-select.error {
  border-color: #ff4d4f;
  box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.2);
}

.field-error {
  color: #ff4d4f;
  font-size: 11px;
  margin-top: 4px;
  display: block;
  line-height: 1.4;
}

测试方法

1. 打开用户管理页面
2. 点击"新增用户"按钮
3. 输入无效的邮箱格式（如：invalid-email）
4. 点击保存
5. 观察邮箱字段是否显示红色边框和错误信息

注意事项

1. 错误信息会在用户重新打开对话框时自动清除
2. 只有后端返回 400 状态码且包含 data 字段时才会显示字段级错误
3. 如果后端返回其他格式的错误，仍会显示通用错误信息
4. 错误信息支持中文，建议后端返回中文错误信息以提供更好的用户体验