deepseek-v3.2 在「联系表单」的评测结果

基本信息

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

系统提示词（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. 页面布局整洁，标签与输入控件对应关系清晰，错误提示视觉上可辨识（红色文字），整体可用性良好。

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

# 联系我们表单页面 以下是一个完整的、符合要求的"联系我们"表单页面实现。所有代码都包含在单个HTML文件中，可以直接在浏览器中运行。 ```html 联系我们 /* 全局样式重置 */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif; } body { background-color: #f5f7fa; color: #333; line-height: 1.6; padding: 20px; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; } /* 页面标题样式 */ .page-header { text-align: center; margin-bottom: 30px; width: 100%; } .page-header h1 { color: #2c3e50; font-size: 2.2rem; margin-bottom: 10px; } .page-header p { color: #7f8c8d; font-size: 1.1rem; max-width: 600px; margin: 0 auto; } /* 表单容器样式 */ .form-container { background-color: white; border-radius: 10px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); padding: 40px; width: 100%; max-width: 560px; transition: all 0.3s ease; } /* 表单样式 */ .contact-form { display: flex; flex-direction: column; } /* 表单字段组样式 */ .form-group { margin-bottom: 24px; position: relative; } .form-group label { display: block; margin-bottom: 8px; font-weight: 600; color: #2c3e50; font-size: 1rem; } .required::after { content: " *"; color: #e74c3c; font-weight: bold; } /* 输入控件样式 */ .form-control { width: 100%; padding: 12px 16px; border: 2px solid #e0e6ed; border-radius: 6px; font-size: 1rem; transition: border-color 0.2s ease; background-color: #f9fafc; } .form-control:focus { outline: none; border-color: #3498db; background-color: white; } textarea.form-control { min-height: 150px; resize: vertical; } /* 字符计数样式 */ .char-count { text-align: right; font-size: 0.9rem; color: #7f8c8d; margin-top: 5px; } .char-count.warning { color: #e67e22; } .char-count.error { color: #e74c3c; font-weight: bold; } /* 错误提示样式 */ .error-message { color: #e74c3c; font-size: 0.9rem; margin-top: 5px; display: none; } .error-message.show { display: block; } .form-control.error { border-color: #e74c3c; } /* 按钮容器样式 */ .button-group { display: flex; justify-content: space-between; margin-top: 30px; gap: 15px; } /* 按钮样式 */...

AI 评审点评

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

【CLAUDE】该生成结果高质量地完成了「联系我们」表单页面的所有要求。功能完整性方面，六个字段全部正确实现，必填验证、字符计数、提交成功提示、重置功能均按规格运行，并额外提供了邮箱格式验证。视觉设计方面，卡片式布局、颜色系统、按钮区分、错误状态反馈均表现专业。代码质量方面，结构清晰、注释到位、语义化良好，是一份适合入门级场景的高质量实现。 【GEMINI】这是一个高质量的交付结果。模型不仅完全满足了提示词中的所有功能性硬指标，还在视觉设计和代码组织上表现出色，提供了一个既美观又健壮的单文件表单解决方案。 【KIMI】该实现是一份高质量的「联系我们」表单页面，完全满足所有功能需求，并在视觉设计和代码质量方面表现优异。表单交互流畅，验证逻辑严谨，字符计数反馈直观，成功状态切换自然。代码结构清晰、注释完善，体现了良好的前端开发规范，可直接作为教学示例或生产环境基础版本使用。

进阶难度评测结果

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

模型生成产物

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

```html 联系我们 - 进阶版 /* ===== CSS 重置与基础样式 ===== */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; } body { background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 20px; color: #333; line-height: 1.6; } /* ===== 主容器与卡片样式 ===== */ .container { width: 100%; max-width: 800px; margin: 0 auto; } .card { background: white; border-radius: 20px; box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } .card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(50, 50, 93, 0.15), 0 8px 20px rgba(0, 0, 0, 0.1); } .card-header { background: linear-gradient(90deg, #4b6cb7 0%, #182848 100%); color: white; padding: 30px; text-align: center; } .card-header h1 { font-size: 2.2rem; margin-bottom: 8px; font-weight: 700; } .card-header p { opacity: 0.9; font-size: 1.1rem; } .card-body { padding: 40px; } /* ===== 表单布局与响应式 ===== */ .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; } @media (max-width: 768px) { .form-grid { grid-template-columns: 1fr; gap: 20px; } .card-body { padding: 30px 25px; } .card-header { padding: 25px 20px; } .card-header h1 { font-size: 1.8rem; } } /* ===== 表单字段通用样式 ===== */ .form-group { position: relative; } .form-group.full-width { grid-column: 1 / -1; } label { display: block; margin-bottom: 8px; font-weight: 600; color: #2d3748; font-size: 0.95rem; } .required::after { content: " *"; color: #e53e3e; } .form-control { width: 100%; padding: 14px 16px; border: 2px solid #e2e8f0; border-radius: 10px; font-size: 1rem; transition: all 0.3s ease; background-color: #f8fafc; } .form-control:focus { outline: none; border-color: #4b6cb7; background-color: white; box-shadow: 0 0 0 3px rgba(75, 108, 183, 0.15); } textarea.form-control { min-height: 180px; resize: vertical;...

AI 评审点评

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

【GEMINI】这是一个高质量的表单实现，完全符合“进阶版”的要求。功能上毫无缺失，特别是字符计数的阻塞逻辑和 localStorage 的状态同步处理得非常细腻。视觉表现力强，交互动效丰富。虽然违反了不使用 CDN 的约束（引入了 Font Awesome），但从 Web 表单的工程实现角度来看，其代码质量和用户体验均达到了生产级别。 【KIMI】整体而言，这是一个高质量的全栈工程师作品，基本实现了所有要求的功能点，UI/UX设计美观现代，代码组织结构清晰。但在电话字段实时验证和XSS防护方面存在一些不足，需要进一步完善。

困难难度评测结果

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

模型生成产物

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

# 联系我们 - 高级多步骤表单 我将创建一个完整的单文件HTML应用，实现所有要求的功能。这个应用将包含多步骤表单、富文本编辑器、音效系统和响应式设计。 ```html 联系我们 - 高级多步骤表单 /* ===== CSS 重置与基础样式 ===== */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif; } :root { --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --primary-light: #7c8de0; --secondary-color: #764ba2; --error-color: #e53e3e; --success-color: #38a169; --warning-color: #d69e2e; --text-primary: #2d3748; --text-secondary: #718096; --border-color: #e2e8f0; --bg-color: #f7fafc; --card-bg: #ffffff; --shadow: 0 10px 25px rgba(0, 0, 0, 0.05); --shadow-hover: 0 15px 35px rgba(0, 0, 0, 0.1); --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } body { background-color: var(--bg-color); color: var(--text-primary); line-height: 1.6; min-height: 100vh; padding: 20px; display: flex; justify-content: center; align-items: center; } /* ===== 主容器与卡片 ===== */ .container { width: 100%; max-width: 680px; margin: 0 auto; } .card { background-color: var(--card-bg); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; transition: var(--transition); } .card:hover { box-shadow: var(--shadow-hover); } .card-header { background: var(--primary-gradient); color: white; padding: 28px 32px; text-align: center; } .card-header h1 { font-size: 2.2rem; font-weight: 700; margin-bottom: 8px; } .card-header p { opacity: 0.9; font-size: 1.1rem; } .card-body { padding: 32px; } /* ===== 进度条 ===== */ .progress-container { display: flex; justify-content: space-between; position: relative; margin-bottom: 40px; counter-reset: step; } .progress-container::before { content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); height: 4px; width: 100%; background-color: var(--border-color); z-index: 1; } .progress-bar { position: absolute; top: 50%; left: 0; transform: translateY(-50%); height: 4px; width: 0%; background: var(--primary-gradient); z-index: 2; transition: width 0.5s ease; } .step { width:...

AI 评审点评

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

【GEMINI】该生成结果在功能逻辑和交互设计上表现出色，完整覆盖了多步骤表单、条件逻辑和自研音效系统等复杂需求。状态管理模式的应用使得代码易于维护。然而，其核心短板在于：1. 违反了硬性的“无外部依赖”约束（引入了 CDN 图标库）；2. 安全意识不足，未能实现有效的 XSS 防护，这对于一个定位为“资深全栈工程师”编写的“生产级”表单来说是较为严重的失误。 【KIMI】该多步骤表单应用在功能实现、用户体验和代码质量方面表现良好，基本满足设计要求。功能完整度高，多步骤向导、条件字段、富文本编辑器等核心功能均实现到位。视觉设计现代，交互反馈及时，无障碍支持较为完善。代码结构清晰，采用状态管理，但需加强XSS防护。总体来说，是一个高质量的表单应用，但安全性和部分细节有待改进。

相关链接

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

• 查看所有模型在此用例的表现：「联系表单」
• 查看该模型的所有评测结果：deepseek-v3.2
• 浏览同维度的其他用例：「表单设计」
• 返回排行榜首页