GLM-5.1 在「多步骤表单」的评测结果

这是该 AI 模型在此测试用例上的详细评测结果。

基本信息

  • 模型名称：GLM-5.1
  • 用例名称：多步骤表单
  • 测试类型：网页生成
  • 评测维度：表单设计

系统提示词（System Prompt）

这是给 AI 模型的背景设定和角色指令：

你是一名资深前端开发工程师，擅长使用原生 HTML、CSS 和 JavaScript 构建交互式 Web 表单。 回答要求： 1. 所有代码必须整合在单个 HTML 文件中，可直接在浏览器中运行，无需任何外部依赖。 2. 代码结构清晰，HTML / CSS / JavaScript 各自集中，注释简洁到位。 3. 优先保证功能逻辑的正确性与完整性，确保 4 个步骤的跳转、验证和数据展示均可正常工作。 4. 验证失败时须在对应字段下方显示明确的中文错误提示，不得仅依赖浏览器默认提示。 5. 进度指示器须与当前步骤保持同步，已完成步骤可点击回跳，未完成步骤不可跳过。 6. 直接输出完整 HTML 代码，不要附加任何解释性文字。

用户提示词（User Prompt）

这是用户给 AI 模型的具体任务要求：

# 多步骤在线订单表单（基础版） 请在单个 HTML 文件中实现一个 4 步骤的在线订单填写表单，具体要求如下。 ## 步骤结构 | 步骤 | 标题 | 字段 | |------|------|------| | 1 | 个人信息 | 姓名（必填）、邮箱（必填，格式校验）、手机号（必填，11位数字） | | 2 | 收货地址 | 省份（必填）、城市（必填）、区县（必填）、详细地址（必填）、邮政编码（必填，6位数字） | | 3 | 支付方式 | 支付宝 / 微信支付 / 银行卡（单选，必选其一） | | 4 | 订单确认 | 只读展示前三步所有信息，提供「确认提交」按钮 | ## 功能要求 1. **进度指示器**：页面顶部显示 1→2→3→4 步骤条，当前步骤高亮，已完成步骤标记为完成状态并支持点击跳回；未完成步骤不可点击跳转。 2. **导航按钮**：每步底部提供「上一步」（第1步隐藏）和「下一步」（第4步替换为「确认提交」）按钮。 3. **必填验证**：点击「下一步」时对当前步骤所有字段进行验证，验证失败则阻止跳转，并在对应字段下方显示红色错误提示文字；验证通过后错误提示消失。 4. **步骤切换动画**：步骤切换时有简单的淡入/滑入过渡效果（CSS transition 实现即可）。 5. **订单确认页**：清晰展示所有已填写信息（分组显示），支付方式以文字形式显示所选项。 6. **提交成功提示**：点击「确认提交」后，隐藏表单，显示一个居中的成功提示页面（包含成功图标和「订单提交成功」文字）。 ## 验证规则 - 姓名：不为空即可 - 邮箱：符合 `xxx@xxx.xxx` 基本格式（使用正则 `/^[^\s@]+@[^\s@]+\.[^\s@]+$/`） - 手机号：11位纯数字（使用正则 `/^\d{11}$/`） - 邮政编码：6位纯数字（使用正则 `/^\d{6}$/`） - 其余文本字段：不为空即可 - 支付方式：必须选择一项 ## 样式要求 - 页面整体居中，最大宽度 600px，有适当内边距 - 进度指示器使用圆形数字节点 + 连接线的经典样式 - 表单字段排列整齐，标签与输入框对齐 - 错误提示为红色小字，显示在对应输入框正下方 - 按钮样式区分主操作（蓝色）和次操作（灰色） 请直接输出完整的 HTML 代码。

任务要求

AI 模型需要满足以下要求：

  1. 4 个步骤均完整实现，字段与题目描述一致，步骤间数据正确传递并在确认页完整展示
  2. 进度指示器与当前步骤实时同步（高亮/完成状态），已完成步骤可点击回跳，未完成步骤禁止跳转
  3. 每步的必填验证在点击「下一步」时触发，验证失败阻止跳转并在字段下方显示明确的中文错误提示，验证通过后提示消失
  4. 邮箱、手机号、邮政编码使用正则进行格式验证，不符合格式时给出具体错误说明
  5. 步骤切换具有可见的过渡动画效果（淡入或滑入）
  6. 点击「确认提交」后隐藏表单并显示提交成功提示页面

评测结果

综合得分

该模型在此用例的得分为：92.0 分（满分 100 分），已通过

基础难度评测结果

  • 得分：92.0 分
  • 通过状态：已通过

模型生成产物

以下是该模型针对此任务的实际生成内容：

```html 在线订单表单 /* ========== 设计令牌 ========== */ :root { --bg: #f4f1eb; --card: #ffffff; --fg: #1c1917; --muted: #78716c; --accent: #0d7377; --accent-hover: #095c5f; --accent-glow: rgba(13,115,119,.12); --border: #e2dfd9; --error: #c0392b; --error-bg: rgba(192,57,43,.07); --success: #059669; --success-bg: #ecfdf5; --radius: 12px; --shadow: 0 8px 32px rgba(28,25,23,.07), 0 1px 3px rgba(28,25,23,.04); } /* ========== 全局重置 ========== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; background: var(--bg); color: var(--fg); min-height: 100vh; display: flex; justify-content: center; padding: 48px 16px 80px; /* 多层渐变背景，避免纯色 */ background-image: radial-gradient(ellipse 60% 50% at 15% 20%, rgba(13,115,119,.04) 0%, transparent 100%), radial-gradient(ellipse 50% 60% at 85% 75%, rgba(217,119,6,.04) 0%, transparent 100%), radial-gradient(circle at 50% 0%, rgba(255,255,255,.6) 0%, transparent 60%); } /* ========== 容器 ========== */ .container { width: 100%; max-width: 600px; } /* ========== 页面标题 ========== */ .page-header { text-align: center; margin-bottom: 36px; } .page-header h1 { font-size: 30px; font-weight: 800; letter-spacing: -.5px; color: var(--fg); line-height: 1.2; } .page-header p { color: var(--muted); font-size: 14px; margin-top: 6px; } /* ========== 进度指示器 ========== */ .stepper { display: flex; align-items: flex-start; justify-content: center; margin-bottom: 32px; padding: 0 8px; } .step-node { display: flex; flex-direction: column; align-items: center; position: relative; cursor: default; user-select: none; -webkit-tap-highlight-color: transparent; } .step-node.clickable { cursor: pointer; } /* 圆形节点 */ .step-circle { width: 42px; height: 42px; border-radius: 50%; border: 2.5px solid var(--border); background: var(--card); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px;...

AI 评审点评

以下是 AI 评审对该模型输出的点评：

【CLAUDE】进度指示器设计精美且功能完善：当前步骤有明显的高亮效果（蓝色背景 + 光晕），已完成步骤显示对勾图标并可点击回跳，未完成步骤为灰色且不可点击，连接线根据完成状态动态填充颜色，视觉状态同步准确。步骤切换动画流畅自然（panelIn 和 panelInBack 动画实现前进/后退的不同方向滑入效果，配合透明度过渡）。UI 设计现代且专业：配色协调（使用 CSS 变量统一管理），表单布局清晰，字段对齐规范，错误提示为红色小字显示在输入框下方位置准确。支付方式采用卡片式单选设计，视觉反馈明确（hover 和选中状态均有边框和背景变化）。确认页分组展示信息层次分明。成功页有弹出动画增强反馈感。响应式设计考虑周到。整体交互流畅且符合用户预期。 【GEMINI】这是一份教科书级别的代码实现。模型不仅精准地完成了所有功能性需求（多步跳转、必填验证、正则校验、数据同步），还在用户体验（UX）和视觉设计上投入了额外的心思，例如响应式适配、前进/后退的不同动画处理以及输入时动态清除错误提示等。代码组织严谨、优雅，展示了极高的前端开发水平。 【KIMI】该代码实现了题目要求的多步骤表单功能，步骤间数据传递和展示正确，必填验证和格式验证均已覆盖。进度指示器和步骤切换动画基本满足要求。代码结构和规范性较好，但部分样式代码可读性有待优化。总体上是一个高质量的实现。

进阶难度评测结果

  • 得分：92.3 分
  • 通过状态：已通过

模型生成产物

以下是该模型针对此任务的实际生成内容：

```html 在线订单 /* ========== 设计令牌 ========== */ :root { --primary: #0D9488; --primary-dark: #0F766E; --primary-deeper: #115E59; --primary-light: #99F6E4; --primary-bg: #F0FDFA; --accent: #F59E0B; --accent-light: #FEF3C7; --bg: #F1F5F9; --card: #FFFFFF; --text: #0F172A; --text-secondary: #334155; --text-muted: #64748B; --border: #E2E8F0; --border-focus: #CBD5E1; --error: #EF4444; --error-light: #FEF2F2; --success: #10B981; --success-light: #ECFDF5; --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --shadow-sm: 0 1px 3px rgba(0,0,0,0.04); --shadow: 0 4px 24px rgba(0,0,0,0.06); --shadow-lg: 0 12px 40px rgba(0,0,0,0.1); } /* ========== 重置与基础 ========== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; line-height: 1.6; overflow-x: hidden; } /* ========== 背景装饰 ========== */ .bg-decor { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .bg-decor::before { content: ''; position: absolute; top: -20%; right: -15%; width: 60vw; height: 60vw; background: radial-gradient(circle, rgba(13,148,136,0.1) 0%, transparent 65%); border-radius: 50%; } .bg-decor::after { content: ''; position: absolute; bottom: -15%; left: -10%; width: 45vw; height: 45vw; background: radial-gradient(circle, rgba(245,158,11,0.08) 0%, transparent 65%); border-radius: 50%; } /* 微妙的网格纹理 */ .bg-grid { position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient(rgba(13,148,136,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(13,148,136,0.03) 1px, transparent 1px); background-size: 48px 48px; } /* ========== 容器 ========== */ .container { max-width: 640px; margin: 0 auto; padding: 48px 20px 60px; position: relative; z-index: 1; } /* ========== 页面标题 ========== */ .page-header { text-align: center; margin-bottom: 40px;...

AI 评审点评

以下是 AI 评审对该模型输出的点评：

【CLAUDE】这是一个高质量的多步骤表单实现，完整满足所有功能要求。代码架构清晰，验证逻辑严谨，步骤跳转安全性控制到位，数据持久化机制完善。特别值得称赞的是：正则验证规则准确且错误提示具体、条件字段联动逻辑正确、音效反馈实现优雅、步骤切换动画方向性明确。UI 设计现代美观，响应式适配良好。代码组织符合工程化标准，模块化分离使维护性强。综合来看，该实现在功能完整性、用户体验和代码质量三方面均达到优秀水平，是一个可直接用于生产环境的解决方案。 【GEMINI】这是一份高质量的表单工程实现。该候选人不仅完全满足了所有功能性要求（如正则验证、持久化、音效、动画），还在代码架构设计上表现出资深工程师的水平。三级联动的数据恢复、Web Audio API 的参数化调用以及严格的步骤安全检查是其亮点。整体代码整洁，注释清晰，交互体验健壮且流畅。 【KIMI】该实现是一个高质量的多步骤表单，在功能完整性、交互体验和代码组织方面均表现优秀。验证逻辑严谨，步骤跳转安全可控，动画和音效反馈精致，数据持久化可靠。 minor 改进点包括：姓名正则可更严格限定字符类型、地区选择的blur验证可更完善、以及部分模块间的职责边界可进一步厘清。整体达到生产可用水准。

困难难度评测结果

  • 得分：94.33 分
  • 通过状态：已通过

模型生成产物

以下是该模型针对此任务的实际生成内容：

```html 在线订单填写 /* ========== CSS 变量 ========== */ :root { --bg: #080c12; --bg-card: #111820; --bg-input: #0b1018; --bg-hover: #162030; --border: #1e2d3d; --border-focus: #10b981; --text: #e2e8f0; --text-secondary: #7a8fa3; --text-muted: #3a4f66; --accent: #10b981; --accent-light: #34d399; --accent-dim: rgba(16,185,129,0.1); --accent-glow: rgba(16,185,129,0.25); --error: #ef4444; --error-dim: rgba(239,68,68,0.1); --warning: #f59e0b; --radius: 14px; --radius-sm: 10px; --shadow: 0 8px 32px rgba(0,0,0,0.4); --transition: 0.3s cubic-bezier(0.4,0,0.2,1); } /* ========== 基础重置 ========== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow-x: hidden; line-height: 1.6; -webkit-font-smoothing: antialiased; } /* ========== 背景效果 ========== */ body::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse 700px 500px at 15% 25%, rgba(16,185,129,0.06) 0%, transparent 70%), radial-gradient(ellipse 500px 600px at 85% 75%, rgba(16,185,129,0.04) 0%, transparent 70%), radial-gradient(ellipse 400px 300px at 50% 50%, rgba(6,78,59,0.05) 0%, transparent 70%); pointer-events: none; z-index: 0; animation: bgPulse 15s ease-in-out infinite alternate; } @keyframes bgPulse { 0% { opacity: 0.8; } 100% { opacity: 1.2; } } /* ========== 静音按钮 ========== */ .mute-btn { position: fixed; top: 20px; right: 20px; z-index: 1000; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--transition); } .mute-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }...

AI 评审点评

以下是 AI 评审对该模型输出的点评：

【CLAUDE】这是一个接近生产级别的高质量实现。代码完全符合 Hard 级别要求：基于 JSON Schema 的动态表单生成架构清晰且可扩展，条件分支逻辑（银行卡字段）和城市联动实现正确，验证系统严密且覆盖所有边界情况，音效反馈系统基于 Web Audio API 合成且语义化设计合理，数据持久化健壮。架构设计采用面向对象风格，职责分离清晰（State/Validator/Renderer/Sound 四大模块），代码可维护性极高。UI 设计精美，深色主题配色专业，动画流畅且方向感知正确，响应式布局完善。唯一微小瑕疵是条件字段的 max-height 过渡动画和联动数据源的硬编码判断，但不影响整体功能完整性和架构优雅性。总体而言，这是一个教科书级别的数据驱动表单向导实现，展现了扎实的前端工程能力。

相关链接

您可以通过以下链接查看更多相关内容：

加载中...
100%