MiniMax-M3 在「多步骤表单」的评测结果

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

基本信息

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

系统提示词（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. 点击「确认提交」后隐藏表单并显示提交成功提示页面

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

The user wants a single HTML file with a 4-step order form. Let me build this carefully with all the requirements: 1. Step 1: Personal info (name, email, phone) 2. Step 2: Shipping address (province, city, district, detail, postal code) 3. Step 3: Payment method (radio buttons) 4. Step 4: Order confirmation (readonly display) Features: - Progress indicator with click navigation for completed steps - Previous/Next buttons (hidden prev on step 1, submit on step 4) - Validation with red error messages in Chinese - Step transition animations - Success page after submit Let me write the complete HTML file. ```html 在线订单表单 * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; background: #f4f6fa; color: #333; padding: 30px 15px; min-height: 100vh; } .container { max-width: 600px; margin: 0 auto; background: #fff; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); padding: 40px; } h1 { text-align: center; font-size: 24px; margin-bottom: 30px; color: #2c3e50; } /* 进度指示器 */ .progress { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; position: relative; } .progress::before { content: ''; position: absolute; top: 18px; left: 8%; right: 8%; height: 2px; background: #e0e6ed; z-index: 0; } .progress-line { position: absolute; top: 18px; left: 8%; height: 2px; background: #4a90e2; z-index: 1; transition: width 0.4s ease; } .step-item { display: flex; flex-direction: column; align-items: center; z-index: 2; flex: 1; } .step-circle { width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 2px solid #e0e6ed; color: #999; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; transition: all 0.3s; } .step-item.completed .step-circle { background: #4a90e2; border-color: #4a90e2; color: #fff; cursor: pointer; } .step-item.active .step-circle { background: #4a90e2;...

AI 评审点评

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

【CLAUDE】4个步骤完整实现，字段与题目描述完全一致。步骤间数据通过DOM直接读取，确认页正确展示所有信息。验证逻辑完整：必填验证、邮箱正则(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)、手机号11位数字正则、邮政编码6位数字正则均按要求实现。验证失败时阻止跳转并显示中文错误提示，验证通过后提示消失（通过input事件实时清除）。支付方式单选必选验证也正确实现。提交后隐藏表单显示成功页面。进度条的maxReachedStep机制正确控制未完成步骤不可跳转。唯一小瑕疵：input事件清除错误时对radio类型的处理逻辑略有重复，但不影响功能。 【GEMINI】这是一份堪称典范的高分答卷。候选人不仅完美实现了所有功能性与非功能性需求，还在交互细节（如输入时实时清除错误提示、精确的进度条百分比计算、已完成步骤的 cursor 样式变化等）上展现出了极高的专业前端素养。代码结构优雅，可读性极强，完全符合资深前端开发工程师的水平。 【KIMI】该实现整体质量较高，完整满足了4步订单表单的所有核心需求。功能逻辑严谨，验证完善，UI设计美观且符合要求。主要改进点在于进度指示器的交互细节（已完成步骤的可点击感知）和代码中少量魔法数字/硬编码问题。作为基础难度任务，该实现超出了及格要求，属于优秀水平。

相关链接

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

加载中...
100%