GLM-5.1 在「条件显示表单」的评测结果

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

基本信息

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

系统提示词（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 操作职责分明，无明显冗余代码

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

```html 保险申请表 /* ========== CSS 变量 ========== */ :root { --bg: #f0f2f5; --card: #ffffff; --fg: #1a1a2e; --muted: #6b7280; --accent: #0d7377; --accent-light: #e0f5f5; --accent-dark: #095456; --gold: #c9963b; --gold-light: #fdf6e8; --border: #d1d5db; --error: #dc2626; --error-bg: #fef2f2; --radius: 8px; --shadow: 0 4px 24px rgba(0,0,0,0.08); --shadow-sm: 0 1px 4px rgba(0,0,0,0.06); } /* ========== 全局重置 ========== */ *, *::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(--fg); line-height: 1.6; min-height: 100vh; padding: 40px 16px; } /* ========== 页面容器 ========== */ .page-wrapper { max-width: 600px; margin: 0 auto; } .page-title { font-size: 28px; font-weight: 800; color: var(--accent-dark); text-align: center; margin-bottom: 8px; letter-spacing: -0.5px; } .page-subtitle { text-align: center; color: var(--muted); font-size: 14px; margin-bottom: 32px; } /* ========== 卡片 ========== */ .card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 32px; margin-bottom: 20px; } /* ========== 分区标题 ========== */ .section-label { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; color: var(--accent-dark); margin-bottom: 20px; padding-bottom: 12px; border-bottom: 2px solid var(--accent-light); } .section-label .icon { width: 28px; height: 28px; border-radius: 6px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex-shrink: 0; } /* ========== 表单行 ========== */ .form-row { margin-bottom: 18px; } .form-row:last-child { margin-bottom: 0; } /* ========== 标签 ========== */ label.field-label { display: block; font-size: 13px; font-weight: 600; color: var(--fg); margin-bottom: 6px; } label.field-label .required { color: var(--error);...

AI 评审点评

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

【GEMINI】这是一份教科书级的实现。模型不仅完美达成了所有功能性要求（条件显示、保费计算、动态验证），还在用户体验和代码健壮性上做了大量优化。通过递归检查 DOM 可见性来处理验证逻辑是非常专业且稳健的做法，页面视觉呈现也非常专业。 【KIMI】整体而言，代码实现了大部分功能要求，包括条件显示逻辑、表单验证和保费展示。代码结构和用户体验也达到了一定的标准。但在表单验证和代码质量方面仍有改进空间，如优化 `isFieldVisible()` 函数的实现，减少代码冗余，以及改进 CSS 样式的组织。

进阶难度评测结果

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

模型生成产物

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

```html 保险申请表 /* ===== 设计令牌 ===== */ :root { --bg: #070b11; --bg-surface: #0d1520; --bg-card: #111c2a; --bg-input: #0a1219; --fg: #d8e2ec; --fg-muted: #5a7189; --fg-dim: #2e4258; --accent: #c98a38; --accent-hover: #dda24e; --accent-glow: rgba(201,138,56,0.12); --accent-glow-strong: rgba(201,138,56,0.25); --border: #1a2c3e; --border-focus: #c98a38; --success: #22c55e; --success-bg: rgba(34,197,94,0.08); --error: #ef4444; --error-bg: rgba(239,68,68,0.07); --radius: 8px; --radius-lg: 14px; --speed: 0.3s; } /* ===== 重置 ===== */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; background: var(--bg); color: var(--fg); line-height: 1.6; min-height: 100vh; overflow-x: hidden; } /* ===== 背景氛围层 ===== */ .bg-orb { position: fixed; border-radius: 50%; pointer-events: none; z-index: 0; filter: blur(100px); } .bg-orb--1 { top: -180px; right: -120px; width: 520px; height: 520px; background: radial-gradient(circle, rgba(201,138,56,0.07) 0%, transparent 70%); } .bg-orb--2 { bottom: -260px; left: -160px; width: 700px; height: 700px; background: radial-gradient(circle, rgba(20,70,120,0.09) 0%, transparent 70%); } .bg-orb--3 { top: 40%; left: 50%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(201,138,56,0.03) 0%, transparent 70%); transform: translateX(-50%); } /* 微妙网格纹理 */ body::before { content: ''; position: fixed; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.012) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.012) 1px, transparent 1px); background-size: 60px 60px; pointer-events: none; z-index: 0; } /* ===== 页面容器 ===== */ .page-wrap { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 48px 24px 100px; animation: fadeUp 0.6s ease both; } @keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1;...

AI 评审点评

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

【GEMINI】这是一个卓越的实现。它不仅完全满足了所有功能性要求（条件显示、排除验证、正则匹配、保费计算、草稿保存），还在用户体验（平滑动画、响应式布局、深色主题）和代码健壮性（防抖处理、状态恢复顺序、disabled 属性控制）上表现出色。特别是处理“隐藏字段不参与验证”这一细节时，采用了禁用控件并动态解绑的方式，这是最稳健的前端实践。整体代码干净、注释到位，是一个高质量的单文件应用。 【KIMI】整体而言，该实现在功能要求、用户体验和代码质量方面都表现良好。条件显示逻辑和实时验证规则完备，动画效果和实时保费计算准确，用户体验细节处理到位。代码质量良好，结构清晰，但仍有改进空间。

相关链接

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

加载中...
100%