GLM-5.1 在「联系表单」的评测结果

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

基本信息

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

系统提示词（System Prompt）

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

你是一名资深前端工程师，擅长使用原生 HTML、CSS 和 JavaScript 构建结构清晰、交互友好的 Web 表单页面。 回答要求： 1. 所有代码（HTML、CSS、JavaScript）必须合并在单个 HTML 文件中，可直接在浏览器运行，无需任何外部依赖。 2. HTML 结构语义化，使用恰当的表单元素（label、input、select、textarea 等），确保字段与标签正确关联。 3. CSS 样式内嵌于 <style> 标签，保持布局整洁、视觉层次清晰，错误提示需醒目可辨。 4. JavaScript 内嵌于 <script> 标签，实现基础必填验证和提交逻辑，代码结构清晰并附有关键注释。 5. 优先保证功能正确性与代码可读性，面向入门级场景，不引入复杂框架或高级特性。

用户提示词（User Prompt）

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

# 联系我们表单页面（基础版） ## 任务描述 请在单个 HTML 文件中实现一个「联系我们」表单页面，所有 HTML、CSS、JavaScript 代码均写在该文件内，无需任何外部库或框架，可直接在浏览器中独立运行。 ## 表单字段要求 | 字段 | 类型 | 是否必填 | |------|------|----------| | 姓名 | 单行文本输入框 | 必填（标注 *） | | 邮箱 | 邮箱输入框 | 必填（标注 *） | | 电话 | 单行文本输入框 | 可选 | | 主题 | 下拉选择框 | 必填（标注 *） | | 消息内容 | 多行文本框（textarea） | 必填（标注 *） | | 发送按钮 | 提交按钮 | — | 主题下拉选项：咨询、反馈、投诉、其他（需包含一个默认的空白/提示选项）。 ## 功能要求 1. **必填标注**：所有必填字段的标签旁显示红色星号（*）。 2. **基础必填验证**：点击发送按钮时，检查所有必填字段是否已填写；若有未填写项，在对应字段下方显示清晰的错误提示文字（如「此字段为必填项」），阻止表单提交。 3. **字符计数**：消息内容文本框下方实时显示已输入字符数，格式为「X / 500」，最多允许输入 500 个字符（超出时阻止继续输入或给出提示）。 4. **提交成功提示**：所有必填字段验证通过后，隐藏表单，在页面显示感谢提示信息（如「感谢您的留言，我们会尽快与您联系！」）。 5. **表单重置**：提供「重置」按钮或感谢页面中的「返回」按钮，点击后清空所有字段并恢复初始状态。 ## 样式要求 - 页面整体居中布局，表单宽度适中（建议 480px–600px）。 - 每个字段的标签（label）与输入控件上下排列，间距合理。 - 错误提示文字使用红色，位于对应输入控件下方。 - 发送按钮样式突出，与重置按钮有视觉区分。 ## 输出要求 直接输出完整的单文件 HTML 代码，代码中的 CSS 置于 `<style>` 标签内，JavaScript 置于 `<script>` 标签内，并在关键逻辑处添加简短注释。

任务要求

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

  1. 所有指定表单字段（姓名、邮箱、电话、主题、消息内容、发送按钮）均存在，字段类型正确，必填字段旁有红色星号标注，主题下拉包含全部四个选项。
  2. 点击发送按钮时触发必填验证，未填写的必填字段在其下方显示明确的错误提示文字，验证通过后才执行提交逻辑（不发生页面跳转）。
  3. 消息内容文本框具有实时字符计数显示（格式为「X / 500」），并对 500 字上限进行有效限制或提示。
  4. 验证通过提交后，表单区域隐藏并显示感谢提示信息；页面提供重置/返回功能，可恢复到初始表单状态。
  5. 所有代码（HTML/CSS/JS）合并在单个 HTML 文件中，可在浏览器直接打开运行，无外部依赖。
  6. 页面布局整洁，标签与输入控件对应关系清晰，错误提示视觉上可辨识（红色文字），整体可用性良好。

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

```html 联系我们 /* ========== CSS 变量 ========== */ :root { --bg: #0f1117; --bg-card: #1a1d27; --fg: #e8e6e3; --muted: #7a7d85; --accent: #e8943a; --accent-hover: #f0a54e; --border: #2e3140; --border-focus: #e8943a; --error: #e85454; --error-bg: rgba(232, 84, 84, 0.08); --success: #3ecf8e; --radius: 10px; --shadow: 0 8px 32px rgba(0, 0, 0, 0.35); } /* ========== 全局重置 ========== */ *, *::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; display: flex; align-items: center; justify-content: center; padding: 40px 20px; position: relative; overflow-x: hidden; } /* ========== 背景装饰 ========== */ body::before { content: ""; position: fixed; top: -30%; left: -10%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(232, 148, 58, 0.12) 0%, transparent 70%); border-radius: 50%; pointer-events: none; animation: floatBlob1 12s ease-in-out infinite; } body::after { content: ""; position: fixed; bottom: -20%; right: -10%; width: 450px; height: 450px; background: radial-gradient(circle, rgba(62, 207, 142, 0.08) 0%, transparent 70%); border-radius: 50%; pointer-events: none; animation: floatBlob2 15s ease-in-out infinite; } @keyframes floatBlob1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(60px, 40px) scale(1.1); } } @keyframes floatBlob2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-50px, -30px) scale(1.15); } } /* ========== 卡片容器 ========== */ .card { position: relative; z-index: 1; width: 100%; max-width: 540px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 48px 40px; box-shadow: var(--shadow); animation: cardIn 0.6s ease-out; } @keyframes cardIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }...

AI 评审点评

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

【CLAUDE】这是一个高质量的联系我们表单实现。功能完整性方面，所有必需字段、验证逻辑、字符计数、提交反馈和重置功能均按要求正确实现，且无外部依赖。用户体验和视觉设计方面，布局整洁专业，错误提示清晰醒目，按钮样式区分明显，整体视觉层次感强。代码质量方面，HTML 语义化良好，CSS 组织规范，JavaScript 逻辑清晰且注释完整，代码可读性和可维护性俱佳。实现不仅满足了所有基础要求，还在视觉设计、交互细节和代码组织上展现了较高的专业水准，是一个可直接用于生产环境的优秀示例。 【GEMINI】这是一个非常优秀且专业的实现。模型不仅精准地完成了任务描述中的所有功能点，还在视觉设计和代码工程化方面展现了极高的水准。它提供了一个不仅可用，而且在审美和交互上都达到商业级标准的表单页面。没有任何明显的缺陷。 【KIMI】该实现远超基础版需求，在功能完整性、视觉设计和代码质量三个维度均表现优异。表单功能完全符合要求，验证逻辑严谨，字符计数和提交反馈完善。视觉设计采用现代化深色主题，动画和交互细节丰富，虽然对「入门级场景」略显精致过度，但并未影响核心功能。代码结构清晰、语义化良好、注释到位，体现了专业前端开发水平。是一个高质量、可直接投入使用的实现。

进阶难度评测结果

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

模型生成产物

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

```html 联系我们 /* ========== 基础变量与重置 ========== */ :root { --bg: #0c0e14; --bg-secondary: #12151e; --card: #181b27; --card-border: #252838; --fg: #e4e2df; --fg-secondary: #9ca3af; --muted: #5c6370; --accent: #d4943a; --accent-glow: rgba(212, 148, 58, 0.25); --accent-hover: #e5a84e; --border: #2a2e3e; --input-bg: #10121a; --input-border: #2e3348; --error: #e5484d; --error-bg: rgba(229, 72, 77, 0.08); --error-border: #e5484d; --success: #30a46c; --success-bg: rgba(48, 164, 108, 0.08); --success-border: #30a46c; --warning: #e5a84e; --radius: 10px; --radius-sm: 6px; --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1); } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } 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; display: flex; align-items: center; justify-content: center; padding: 24px 16px; overflow-x: hidden; position: relative; } /* ========== 背景装饰 ========== */ .bg-decoration { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .bg-orb { position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.4; } .bg-orb--1 { width: 500px; height: 500px; background: radial-gradient(circle, rgba(212,148,58,0.18), transparent 70%); top: -15%; right: -10%; animation: orbFloat1 18s ease-in-out infinite; } .bg-orb--2 { width: 400px; height: 400px; background: radial-gradient(circle, rgba(48,164,108,0.1), transparent 70%); bottom: -10%; left: -8%; animation: orbFloat2 22s ease-in-out infinite; } .bg-orb--3 { width: 300px; height: 300px; background: radial-gradient(circle, rgba(212,148,58,0.08), transparent 70%); top: 50%; left: 50%; transform: translate(-50%, -50%); animation: orbFloat3 15s ease-in-out infinite; } @keyframes orbFloat1 { 0%, 100% { transform: translate(0, 0)...

AI 评审点评

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

【CLAUDE】这是一个高质量的联系表单实现，完整满足所有进阶功能要求。实时验证逻辑准确且用户体验友好，正则表达式校验严谨，字符计数和草稿持久化功能实现完善。UI 设计现代精致，深色主题配合动态背景效果视觉吸引力强，响应式布局优秀，交互状态反馈清晰一致。代码组织结构清晰，模块化良好，安全性考虑周到（使用 textContent 防 XSS）。唯一可优化点：localStorage 保存可增加防抖以提升性能，部分复杂动画效果可根据设备性能调整。整体而言，这是一个可直接用于生产环境的高水准实现。 【GEMINI】这是一份生产级别的表单实现方案。不仅完全满足了所有功能性要求，而且在 UI 设计和用户体验细节上表现卓越。代码编写规范，逻辑严谨，充分考虑了响应式布局、无障碍访问（prefers-reduced-motion）以及异常处理，是一个非常高质量的生成结果。 【KIMI】该实现是一份高质量的联系我们表单，在功能完整性、视觉设计和代码质量三方面均表现优异。深色主题配合动态背景营造出专业的现代感，验证逻辑严谨且用户体验流畅，localStorage草稿机制和完整的提交-反馈流程体现了生产级别的开发水准。代码结构清晰、注释完善，基本安全防护措施到位。 minor改进空间包括电话号段覆盖更完整、少数样式一致性细节优化，以及可考虑增加更严格的输入消毒处理。

困难难度评测结果

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

模型生成产物

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

```html 联系我们 — 多步骤表单 /* ======================================== CSS 变量与全局重置 ======================================== */ :root { --primary-start: #667eea; --primary-end: #764ba2; --error: #e53e3e; --error-light: rgba(229,62,62,0.1); --success: #38a169; --success-light: rgba(56,161,105,0.1); --bg: #f0f2f8; --card: #ffffff; --text: #1a202c; --text-muted: #718096; --border: #e2e8f0; --border-focus: #667eea; --shadow: 0 12px 48px rgba(102,126,234,0.12), 0 2px 12px rgba(0,0,0,0.04); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } 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(--text); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; position: relative; overflow-x: hidden; } /* ======================================== 背景装饰层 ======================================== */ body::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse 600px 400px at 15% 20%, rgba(102,126,234,0.1) 0%, transparent 70%), radial-gradient(ellipse 500px 500px at 85% 75%, rgba(118,75,162,0.08) 0%, transparent 70%), radial-gradient(ellipse 400px 300px at 50% 50%, rgba(56,161,105,0.04) 0%, transparent 70%); z-index: -2; animation: bgDrift 25s ease-in-out infinite alternate; } @keyframes bgDrift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-15px, 10px) scale(1.02); } 100% { transform: translate(10px, -8px) scale(1); } } /* 浮动装饰圆 */ .bg-orb { position: fixed; border-radius: 50%; pointer-events: none; z-index: -1; filter: blur(60px); opacity: 0.5; } .bg-orb--1 { width: 300px; height: 300px; background: linear-gradient(135deg, rgba(102,126,234,0.2), rgba(118,75,162,0.15)); top: -80px; left: -60px; animation: orbFloat1 18s ease-in-out infinite; } .bg-orb--2 { width: 220px; height: 220px; background: linear-gradient(135deg,...

AI 评审点评

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

【CLAUDE】这是一个高质量的生产级单文件实现，完整满足了所有功能要求。代码采用状态管理模式，结构清晰，模块化注释分区便于维护；多步骤向导逻辑严谨，条件字段动态显示正确，富文本编辑器功能完整且字符限制准确；音效系统基于 Web Audio API 实现，无外部依赖；表单验证健壮，XSS 防护到位；视觉设计专业美观，响应式适配完善，无障碍支持全面，交互反馈清晰流畅。主要改进空间：富文本编辑器可考虑迁移到非废弃 API，sessionStorage 失败时可给出用户提示，字符计数器的警告阶段视觉区分度可以更高。总体而言，这是一个功能完整、代码优雅、用户体验出色的实现。 【GEMINI】这是一份极高质量的交付。该模型不仅完美复现了所有复杂的功能要求（如自定义富文本编辑器和 Web Audio 音效），还在 UI/UX 细节上展现了极高的专业水准。代码结构清晰，逻辑健壮，状态管理模式的应用使得多步骤表单的维护变得简单，是一个非常优秀的资深全栈工程师级别的实现示例。 【KIMI】该实现整体质量较高，完整覆盖了需求文档中的核心功能点，视觉设计专业且无障碍支持完善。状态管理和模块化组织体现了生产级代码意识，音效系统和动画反馈增强了交互体验。主要扣分集中在富文本编辑器的输入限制完整性（未彻底阻断超限输入）、废弃API的使用、以及部分边界情况的安全处理。建议在后续迭代中替换execCommand为现代Selection API，加强富文本内容的净化处理，并完善sessionStorage数据的校验机制。

相关链接

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

加载中...
100%