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 操作职责分明，无明显冗余代码

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

```html 保险申请表 /* ========== CSS 变量 ========== */ :root { --bg: #f0f2f5; --card: #ffffff; --fg: #1a1a2e; --muted: #6b7280; --accent: #0d7377; --accent-light: #e0f2f1; --accent-dark: #095456; --gold: #c8952e; --gold-light: #fdf6e3; --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-header { text-align: center; margin-bottom: 32px; } .page-header h1 { font-size: 28px; font-weight: 800; color: var(--accent-dark); letter-spacing: -0.5px; } .page-header p { color: var(--muted); font-size: 14px; margin-top: 6px; } /* ========== 卡片 ========== */ .form-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 32px 28px; } /* ========== 表单分区 ========== */ .form-section { padding: 20px 0; border-bottom: 1px solid #eef0f3; } .form-section:last-of-type { border-bottom: none; } .section-title { font-size: 16px; font-weight: 700; color: var(--accent-dark); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; } .section-title::before { content: ""; display: inline-block; width: 4px; height: 18px; background: var(--accent); border-radius: 2px; } /* ========== 表单行 ========== */ .form-row { margin-bottom: 18px; } .form-row:last-child { margin-bottom: 0; } .form-row label { display: block; font-size: 14px; font-weight: 600; color: var(--fg); margin-bottom: 6px; } .form-row label .required { color: var(--error); margin-left: 2px; } /* ========== 输入控件 ========== */ input[type="text"], input[type="number"],...

AI 评审点评

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

【CLAUDE】这是一个高质量的保险申请表实现。核心功能完整且准确：条件显示逻辑严谨，验证机制动态绑定可见字段，保费展示实时更新，完全符合需求规格。代码结构清晰，HTML 语义化，CSS 模块化，JavaScript 逻辑可读性强。用户体验优秀，视觉设计精美，错误反馈明确，交互流畅。存在的小问题（如选填字段标注不明确、数值范围未校验、部分代码可优化）不影响核心功能，属于可接受的细节瑕疵。整体达到了生产级代码的标准，是一个可直接使用的完整解决方案。 【GEMINI】这是一份非常优秀的代码实现。开发者不仅准确完成了所有复杂的条件显示和动态验证逻辑，还在代码可读性和视觉呈现上展现了极高水准。通过合理利用 classList 和 data 属性，使得表单的维护性和扩展性得到了保证，完全符合资深前端工程师的定位。 【KIMI】该实现是一份高质量的前端表单代码，完整满足了所有核心功能需求。条件显示逻辑准确可靠，验证机制动态绑定可见字段，用户体验经过精心打磨。代码结构清晰、易于维护，视觉呈现专业美观。 minor 改进空间包括：使用现代 ES6+ 语法（let/const）、增强数值型字段的范围验证、以及更严格匹配题目文案格式。

进阶难度评测结果

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

模型生成产物

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

```html 保险申请表 /* ==================== 设计令牌 ==================== */ :root { --bg: #0c1117; --bg-deep: #080d12; --card: #141c27; --card-alt: #182231; --border: #243044; --border-focus: #00d4aa; --accent: #00d4aa; --accent-dim: rgba(0, 212, 170, 0.12); --accent-glow: rgba(0, 212, 170, 0.18); --gold: #e8a830; --gold-dim: rgba(232, 168, 48, 0.12); --fg: #e2e8f0; --fg-muted: #6b829e; --error: #f05050; --error-dim: rgba(240, 80, 80, 0.1); --success: #00d4aa; --radius: 12px; --radius-sm: 8px; --ease: cubic-bezier(0.4, 0, 0.2, 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(--fg); min-height: 100vh; line-height: 1.6; overflow-x: hidden; } /* ==================== 背景氛围 ==================== */ .bg-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 60% 50% at 15% 10%, rgba(0,212,170,0.05) 0%, transparent 70%), radial-gradient(ellipse 50% 60% at 85% 85%, rgba(232,168,48,0.04) 0%, transparent 70%), radial-gradient(ellipse 80% 40% at 50% 100%, rgba(0,80,180,0.03) 0%, transparent 60%); } .bg-grid { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.025; background-image: linear-gradient(var(--fg) 1px, transparent 1px), linear-gradient(90deg, var(--fg) 1px, transparent 1px); background-size: 60px 60px; } /* 浮动光斑 */ .orb { position: fixed; border-radius: 50%; filter: blur(80px); pointer-events: none; z-index: 0; } .orb-1 { width: 400px; height: 400px; top: -100px; left: -100px; background: rgba(0,212,170,0.06); animation: orb-drift 20s ease-in-out infinite; } .orb-2 { width: 300px; height: 300px; bottom: -80px; right: -80px; background: rgba(232,168,48,0.05); animation: orb-drift 25s ease-in-out infinite reverse; } @keyframes orb-drift { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(30px,...

AI 评审点评

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

【CLAUDE】这是一个高质量的保险申请表实现，完整满足了所有功能要求。条件显示逻辑精确，验证规则完备（正则表达式、日期逻辑、数值范围均正确实现），保费计算实时准确，草稿自动保存功能完整可靠。用户体验设计优秀：动画过渡平滑自然，错误提示即时清晰，保费预览面板带视觉反馈，提交流程友好。代码结构清晰，CSS/JS 逻辑适度分离，函数职责单一，命名语义化，关键逻辑有注释，具备良好的可维护性。细节处理到位（如日期联动、大写转换、滚动聚焦等）。微小不足：部分函数可进一步拆分以提升单一职责原则，错误处理可增加日志记录，Toast 和模态框的交互提示可更明确。整体而言，这是一个接近生产级别的表单实现，展现了扎实的前端开发能力和良好的工程素养。 【GEMINI】这是一个教科书级别的实现。不仅完全满足了所有功能性要求（条件显示、动态验证解绑、草稿保存、实时计算），而且在代码健壮性和用户体验细节（如日期联动、提交后的 JSON 预览、优雅的错误处理）上表现卓越。UI 设计精美，代码组织清晰，充分展现了资深前端工程师的水准。 【KIMI】该实现整体质量较高，完整覆盖了需求中的核心功能点：条件显示、实时验证、保费计算、草稿保存均正确实现，视觉设计精致且动画流畅。主要扣分点在于车牌号正则的严谨性不足、旅行险月付/年付概念混淆、以及隐藏字段在DOM层面未彻底移除导致的潜在数据污染风险。代码结构良好但全局状态管理与DOM同步存在优化空间，适合作为生产代码的基础版本，经细节打磨后可达到更高标准。

困难难度评测结果

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

模型生成产物

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

```html 保险申请表 /* ==================== CSS变量与基础样式 ==================== */ :root { --primary: #0B2545; --primary-mid: #134074; --primary-light: #1B6CA8; --accent: #00D4AA; --accent-glow: rgba(0,212,170,0.25); --bg: #F0F4F8; --card: #FFFFFF; --text: #0B1D33; --text-sec: #5A6B7F; --border: #D8E2EC; --border-focus: #1B6CA8; --success: #0DAB76; --warning: #E8A317; --error: #D64545; --radius: 10px; --shadow: 0 2px 16px rgba(11,37,69,0.07); --shadow-lg: 0 8px 32px rgba(11,37,69,0.12); --transition: 300ms cubic-bezier(.4,0,.2,1); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{font-size:16px;scroll-behavior:smooth} body{ font-family:'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif; background:var(--bg);color:var(--text);min-height:100vh; background-image: radial-gradient(ellipse 80% 60% at 20% 10%, rgba(27,108,168,0.06) 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 80% 90%, rgba(0,212,170,0.05) 0%, transparent 60%); } /* ==================== 布局 ==================== */ .app-container{max-width:720px;margin:0 auto;padding:24px 16px 48px} .app-header{text-align:center;margin-bottom:32px} .app-header h1{font-size:1.75rem;font-weight:800;color:var(--primary);letter-spacing:-0.5px} .app-header p{color:var(--text-sec);margin-top:4px;font-size:.9rem} /* ==================== 步骤指示器 ==================== */ .stepper{display:flex;align-items:center;justify-content:center;margin-bottom:36px;position:relative;padding:0 8px} .stepper::before{content:'';position:absolute;top:18px;left:40px;right:40px;height:3px;background:var(--border);border-radius:2px;z-index:0} .stepper-progress{position:absolute;top:18px;left:40px;height:3px;background:var(--accent);border-radius:2px;z-index:1;transition:width var(--transition)} .step-dot{ position:relative;z-index:2;display:flex;flex-direction:column;align-items:center; width:80px;cursor:default; } .step-circle{ width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;...

AI 评审点评

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

【CLAUDE】这是一个高质量的实现，完全满足数据驱动架构要求，表单结构由 FORM_SCHEMA 配置对象驱动，无硬编码重复 HTML。条件显示逻辑的三重排除机制（视觉隐藏 + 验证跳过 + 提交排除）实现严密，异步验证、保费计算、音效系统、草稿持久化等功能完整且准确。代码架构分层清晰，配置层、状态层、验证层、渲染层解耦良好，可读性和可维护性优秀。用户体验流畅，动画过渡平滑，音效系统语义化明确，无障碍支持覆盖了主要场景。主要扣分点在于：日期验证逻辑的边界判断可优化，部分无障碍细节（如动态内容变化的 ARIA Live 播报、自定义控件的显式 role）可进一步完善。整体而言，这是一个接近生产级别的表单实现，展现了扎实的前端工程能力和对复杂交互场景的深刻理解。

相关链接

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

加载中...
100%