MiniMax-M3 在「条件显示表单」的评测结果

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

基本信息

  • 模型名称：MiniMax-M3
  • 用例名称：条件显示表单
  • 测试类型：网页生成
  • 评测维度：表单设计

系统提示词（System Prompt）

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

你是一名资深前端开发工程师，擅长使用原生 HTML、CSS 和 JavaScript 构建交互式表单页面。 回答要求： 1. 所有代码必须整合在单个 HTML 文件中，可在浏览器中直接运行，无需任何外部依赖。 2. 代码结构清晰，HTML 语义化，CSS 与 JS 分别置于 <style> 和 <script> 标签内。 3. 条件显示逻辑必须准确：隐藏的字段在视觉上不可见，且不参与表单验证；只验证当前可见字段。 4. 表单验证仅需覆盖必填项检查，错误提示信息应清晰、具体，紧邻对应字段显示。 5. 保费计算逻辑可使用固定的模拟数值，重点在于根据保险类型和支付方式正确切换显示价格。 6. 优先保证功能正确性与代码可读性，不追求复杂动画或高级架构。

用户提示词（User Prompt）

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

# 保险申请表 —— 条件显示表单（基础版） 请生成一个保险申请表页面，所有代码（HTML、CSS、JavaScript）写在同一个 HTML 文件中，可直接在浏览器打开运行。 ## 页面布局要求 - 页面居中显示，最大宽度 600px，有基础样式（背景色、卡片阴影、内边距） - 表单分区清晰，每个条件区块有明显的视觉分隔 ## 条件显示逻辑（核心功能） ### 1. 保险类型选择（下拉菜单，必填） 选项：请选择 / 车险 / 健康险 / 旅行险 - 选择【车险】：显示「车辆信息」区块，包含： - 车牌号（文本输入，必填） - 车辆品牌（文本输入，必填） - 车辆型号（文本输入，必填） - 购买年份（数字输入，必填） - 选择【健康险】：显示「健康信息」区块，包含： - 年龄（数字输入，必填） - 身高 cm（数字输入，必填） - 体重 kg（数字输入，必填） - 既往病史（文本域，选填） - 选择【旅行险】：显示「旅行信息」区块，包含： - 目的地（文本输入，必填） - 出发日期（日期选择，必填） - 返回日期（日期选择，必填） - 出行人数（数字输入，必填，最小值 1） - 切换保险类型时，隐藏其他区块，且隐藏区块的字段不参与验证 ### 2. 是否有附加险需求（单选按钮：是 / 否，默认否） - 选择【是】：显示附加险选项区块（多选框），包含： - □ 意外伤害险 - □ 财产损失险 - □ 第三方责任险 - 选择【否】：隐藏附加险区块 ### 3. 支付方式（单选按钮：月付 / 年付，默认月付） - 在页面上显示「预估保费」区域，根据保险类型 + 支付方式展示模拟价格： - 车险月付：¥500/月；车险年付：¥5,500/年（节省500元） - 健康险月付：¥300/月；健康险年付：¥3,200/年（节省400元） - 旅行险月付：¥150/月；旅行险年付：¥1,600/年（节省200元） - 未选择保险类型时：显示「请先选择保险类型」 ### 4. 是否需要发票（单选按钮：是 / 否，默认否） - 选择【是】：显示发票信息区块，包含： - 公司名称（文本输入，必填） - 税号（文本输入，必填） - 选择【否】：隐藏发票信息区块 ## 表单验证要求 - 点击「提交申请」按钮时触发验证 - 只验证当前可见字段中标注为「必填」的字段 - 验证规则：必填字段不能为空 - 错误提示：在对应字段下方显示红色错误文字，输入框边框变红 - 验证通过后：显示一个成功提示（alert 或页面内提示均可），内容为「申请提交成功！」 - 重新输入时，对应字段的错误状态应清除 ## 字段显示/隐藏 - 使用 display: none / display: block 控制区块的显示与隐藏 - 可添加简单的 CSS transition 使切换更平滑（可选，不强制） 请直接输出完整的 HTML 代码。

任务要求

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

  1. 条件显示逻辑正确：三种保险类型对应的信息区块能准确切换显示，切换时隐藏其他区块，附加险和发票区块也能根据单选按钮正确显示/隐藏
  2. 验证范围动态绑定：表单提交验证时，只对当前可见的必填字段进行非空校验，隐藏字段不触发验证错误
  3. 错误提示清晰可见：验证失败时，错误信息紧邻对应字段显示，输入框有明显的错误状态样式（如红色边框），且错误提示在用户修正后能正确清除
  4. 保费展示随条件更新：预估保费区域能根据保险类型和支付方式的组合，实时显示正确的模拟价格文案
  5. 代码结构清晰：HTML 结构语义化，JavaScript 逻辑可读，条件判断与 DOM 操作职责分明，无明显冗余代码

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

Let me analyze the requirements carefully: 1. Single HTML file with HTML, CSS, JS 2. Page centered, max-width 600px, basic styling 3. Insurance application form with conditional display logic 4. Form sections: - Insurance type dropdown (required) - Additional insurance radio (Yes/No, default No) - Payment method radio (Monthly/Yearly, default Monthly) - Invoice needed radio (Yes/No, default No) 5. Conditional blocks based on selections 6. Form validation only on visible required fields 7. Premium calculation display 8. Error messages on validation fail Let me build this step by step: ### Insurance Type - Car insurance: License plate, brand, model, year (all required text/number) - Health insurance: Age, height, weight (required numbers), medical history (optional textarea) - Travel insurance: Destination (required), departure date (required), return date (required), number of travelers (required, min 1) ### Additional Insurance - Checkboxes: accident, property, third party ### Payment Method - Radio: monthly/yearly - Premium display based on type + payment ### Invoice - Radio: yes/no - If yes: company name, tax ID ### Validation - Only validate visible required fields - Show error in red below field, red border - Success alert on valid ### CSS - Centered, max-width 600px - Card shadow, padding - Section dividers - Transition for smooth show/hide Let me code this now. ```html 保险申请表 * { box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; background: #f4f6f9; margin: 0; padding: 30px 16px; color: #333; } .container { max-width: 600px; margin: 0 auto; background: #fff; border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); padding: 28px; } h1 { text-align: center; margin: 0 0 24px; font-size: 22px; color: #2c3e50; } .section { margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px dashed #e0e6ed; } .section:last-of-type { border-bottom: none; } .section-title {...

AI 评审点评

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

【CLAUDE】该生成结果高质量地完成了保险申请表的所有核心需求：条件显示逻辑准确、验证范围动态绑定、错误提示清晰、保费实时更新，代码结构清晰可读，视觉设计美观。功能实现完整度接近满分，是一份优秀的前端表单实现。 【GEMINI】这是一份完美的候选代码实现。不仅完全且精准地实现了所有业务需求（条件显示、动态验证、保费计算、错误清除），而且在代码结构设计、CSS 视觉呈现以及交互细节（如平滑动画、滚动到错误项）上都展现出了资深前端工程师的高水准，无可挑剔。 【KIMI】该实现完整覆盖了所有功能需求，条件显示逻辑严谨，验证范围动态绑定准确，代码结构清晰且用户体验超出基础预期。保费计算、错误提示、状态清除等细节处理到位，是一个高质量的单文件表单实现。

相关链接

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

加载中...
100%