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

基本信息

• 模型名称：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】该代码实现了题目要求的多步骤表单功能，步骤间数据传递和展示正确，必填验证和格式验证均已覆盖。进度指示器和步骤切换动画基本满足要求。代码结构和规范性较好，但部分样式代码可读性有待优化。总体上是一个高质量的实现。

进阶难度评测结果

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

模型生成产物

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

```html 在线订单 - 多步骤表单 /* ========== CSS 变量与基础样式 ========== */ :root { --primary: #059669; --primary-light: #10b981; --primary-dark: #047857; --primary-bg: #ecfdf5; --bg: #f0fdf4; --card: #ffffff; --text: #1e293b; --text-muted: #64748b; --border: #d1d5db; --error: #ef4444; --error-bg: #fef2f2; --success: #22c55e; --shadow: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05); --shadow-lg: 0 10px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.04); --radius: 14px; --radius-sm: 8px; } *, *::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: linear-gradient(160deg, #f0fdf4 0%, #ecfdf5 40%, #f0fdfa 100%); color: var(--text); min-height: 100vh; overflow-x: hidden; } /* ========== 背景装饰 ========== */ .bg-orb { position: fixed; border-radius: 50%; filter: blur(90px); opacity: 0.35; pointer-events: none; z-index: 0; } .bg-orb--1 { width: 420px; height: 420px; background: #a7f3d0; top: -120px; left: -80px; } .bg-orb--2 { width: 320px; height: 320px; background: #6ee7b7; bottom: -60px; right: -60px; } .bg-orb--3 { width: 180px; height: 180px; background: #34d399; top: 45%; left: 55%; opacity: 0.2; } /* ========== 主容器 ========== */ .container { position: relative; z-index: 1; max-width: 660px; margin: 0 auto; padding: 36px 20px 60px; } /* ========== 页面标题 ========== */ .page-header { text-align: center; margin-bottom: 32px; } .page-header h1 { font-size: 30px; font-weight: 800; color: var(--primary-dark); letter-spacing: -0.5px; } .page-header p { color: var(--text-muted); margin-top: 6px; font-size: 15px; } /* ========== 进度条 ========== */ .progress { display: flex; align-items: center; justify-content: center; margin-bottom: 32px; padding: 0 8px; } .progress__step { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: default; user-select: none;...

AI 评审点评

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

【GEMINI】这是一份近乎完美的交付结果。开发者不仅完全满足了所有功能性与技术性要求，还在交互细节（如音效频率设计、进度智能恢复、动画锁机制）上展现了资深前端工程师的专业水准。代码结构清晰，无任何外部依赖，完全符合‘单文件可直接运行’的生产级标准。 【KIMI】整体而言，这是一个高质量的多步骤表单实现。核心功能如表单验证、步骤跳转、数据持久化等均实现良好，用户体验和交互细节也考虑周到。代码结构和组织较好，但有进一步提升模块化和解耦的空间。在不依赖外部资源的情况下，实现了音效反馈和动画效果，提升了表单的交互体验。

困难难度评测结果

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

模型生成产物

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

```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 评审对该模型输出的点评：

【GEMINI】该生成结果完美符合 Hard 级别的所有技术要求。代码不仅在功能上无懈可击（动态表单、条件分支、音效系统、持久化），在架构设计上也展现了极高的专业水准，体现了资深全栈工程师的逻辑严密性。特别是对 Web Audio API 的运用和方向感知动画的处理，超出了基础预期，是一个高质量的单文件应用示例。 【KIMI】整体上，该实现满足了所有的功能要求，代码结构清晰，用户体验良好，逻辑严密，具有良好的可扩展性和可维护性。

相关链接

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

• 查看所有模型在此用例的表现：「多步骤表单」
• 查看该模型的所有评测结果：GLM-5.1
• 浏览同维度的其他用例：「表单设计」
• 返回排行榜首页