qwen3-coder-plus 在「联系表单」的评测结果

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

基本信息

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

系统提示词（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.4 分（满分 100 分），已通过

基础难度评测结果

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

模型生成产物

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

```html 联系我们 body { font-family: Arial, sans-serif; background-color: #f5f5f5; margin: 0; padding: 20px; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .container { width: 100%; max-width: 500px; background-color: white; padding: 30px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } h1 { text-align: center; color: #333; margin-bottom: 30px; } .form-group { margin-bottom: 20px; } label { display: block; margin-bottom: 5px; font-weight: bold; color: #555; } /* 必填字段的星号样式 */ label.required::after { content: " *"; color: red; } input[type="text"], input[type="email"], select, textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; box-sizing: border-box; } textarea { height: 120px; resize: vertical; } .error-message { color: red; font-size: 14px; margin-top: 5px; display: none; /* 默认隐藏 */ } .char-count { text-align: right; font-size: 14px; color: #777; margin-top: 5px; } .button-group { display: flex; gap: 10px; margin-top: 20px; } button { flex: 1; padding: 12px; border: none; border-radius: 4px; font-size: 16px; cursor: pointer; } .btn-submit { background-color: #007bff; color: white; } .btn-submit:hover { background-color: #0056b3; } .btn-reset { background-color: #6c757d; color: white; } .btn-reset:hover { background-color: #545b62; } .success-message { text-align: center; padding: 40px 20px; display: none; /* 默认隐藏 */ } .success-message p { font-size: 18px; color: #28a745; line-height: 1.6; } .btn-back { background-color: #28a745; color: white; padding: 12px 20px; border: none; border-radius: 4px; font-size: 16px; cursor: pointer; margin-top: 20px; } .btn-back:hover { background-color: #218838; } 联系我们 姓名 此字段为必填项 邮箱 此字段为必填项 电话 主题 请选择... 咨询 反馈 投诉 其他 此字段为必填项 消息内容 0 / 500 此字段为必填项 发送 重置 感谢您的留言，我们会尽快与您联系！ 返回表单 // 获取DOM元素 const form = document.getElementById('contactForm'); const successMessage = document.getElementById('successMessage'); const resetBtn =...

AI 评审点评

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

【CLAUDE】该生成结果整体质量优秀，完整实现了任务要求的所有功能点，包括表单字段、必填验证、字符计数、提交成功提示及重置功能，并额外增加了邮箱格式验证。代码结构清晰，语义化良好，注释完整，CSS样式整洁美观，按钮区分明显，用户体验良好。是一个高质量的基础版联系我们表单实现。 【GEMINI】这是一份高质量的交付结果。模型不仅完全遵循了所有的功能性指令，还在代码结构和视觉呈现上表现出色。特别是在字符计数限制和表单状态切换（隐藏/显示）的逻辑处理上非常稳健，完全符合「资深前端工程师」的人设定位。 【KIMI】该实现是一份高质量的「联系我们」表单代码，完整覆盖了所有功能需求，代码结构规范、可读性强，视觉设计简洁实用。在基础要求之上，额外实现了邮箱格式验证和字符自动截断功能，体现了良好的工程意识。适合作为入门级前端表单开发的参考实现。

进阶难度评测结果

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

模型生成产物

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

```html 联系我们 - 进阶版 /* === 全局样式与重置 === */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 20px; } /* === 表单容器样式 === */ .form-container { width: 100%; max-width: 600px; background: white; border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); overflow: hidden; } .form-header { background: #4a6cf7; color: white; padding: 30px; text-align: center; } .form-header h1 { font-size: 28px; margin-bottom: 8px; } .form-header p { opacity: 0.9; font-size: 16px; } .form-body { padding: 30px; } /* === 表单字段通用样式 === */ .form-group { margin-bottom: 24px; position: relative; } .form-label { display: block; margin-bottom: 8px; font-weight: 600; color: #333; font-size: 15px; } .required::after { content: " *"; color: #e74c3c; } .form-input, .form-select, .form-textarea { width: 100%; padding: 14px; border: 2px solid #e1e5eb; border-radius: 8px; font-size: 16px; transition: all 0.3s ease; background-color: #fafafa; } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: #4a6cf7; background-color: white; box-shadow: 0 0 0 3px rgba(74, 108, 247, 0.2); } /* === 验证状态样式 === */ .form-input.valid, .form-select.valid, .form-textarea.valid { border-color: #2ecc71; background-color: #f0fff4; } .form-input.invalid, .form-select.invalid, .form-textarea.invalid { border-color: #e74c3c; background-color: #fff5f5; } /* === 错误信息样式 === */ .error-message { color: #e74c3c; font-size: 14px; margin-top: 6px; display: none; display: flex; align-items: center; gap: 6px; } .error-message.show { display: flex; } .error-icon { width: 16px; height: 16px; display: inline-block; } .error-icon svg { width: 100%; height: 100%; } /* === 成功图标样式 === */ .success-icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width:...

AI 评审点评

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

【CLAUDE】该实现整体质量较高，完成了联系我们表单的绝大部分进阶功能需求，视觉设计现代美观，代码结构清晰。主要问题集中在：1）CSS中error-message的双display声明是一个会影响初始渲染的实际bug，所有错误信息在初始状态会显示；2）成功图标在textarea上的定位不合理；3）字符计数显示格式与需求略有出入；4）模拟延迟时间与需求不符。这些问题影响了最终的完成度和用户体验，但核心功能逻辑（验证、localStorage、提交流程）基本正确，是一个有瑕疵但整体可用的实现。 【GEMINI】这是一个高质量的生产级别表单实现。模型不仅准确理解了所有复杂的业务逻辑要求（如字符计数的颜色切换、草稿持久化等），还在 UI/UX 细节上表现出资深工程师的水准。代码整洁、逻辑严密，完全符合「进阶版」的定位，可直接投入实际场景使用。 【KIMI】该生成结果是一份高质量的「联系我们表单」实现，完整覆盖了所有功能需求，UI设计专业且响应式表现优秀，代码结构清晰、模块化程度高。主要改进点：修正模拟提交延迟为500ms、将感谢信息的用户姓名插入方式改为textContent以增强XSS防护、可考虑为电话字段添加更宽松的格式兼容（如支持座机）。整体达到生产级别水准，可直接投入使用。

困难难度评测结果

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

模型生成产物

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

```html 联系我们 — 高级多步骤表单 :root { --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --error-color: #e53e3e; --success-color: #38a169; --border-color: #e2e8f0; --text-color: #2d3748; --light-bg: #f7fafc; --card-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--primary-gradient); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; } .contact-form-container { width: 100%; max-width: 680px; background: white; border-radius: 12px; box-shadow: var(--card-shadow); overflow: hidden; } .form-header { background: var(--primary-gradient); color: white; padding: 24px; text-align: center; position: relative; } .mute-toggle { position: absolute; top: 16px; right: 16px; background: rgba(255, 255, 255, 0.2); border: none; border-radius: 50%; width: 32px; height: 32px; cursor: pointer; color: white; font-size: 14px; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .mute-toggle:hover { background: rgba(255, 255, 255, 0.3); } .form-title { margin: 0; font-size: 24px; font-weight: 600; } .progress-bar { display: flex; justify-content: space-between; padding: 20px 40px; background: var(--light-bg); border-bottom: 1px solid var(--border-color); } .step-indicator { display: flex; align-items: center; gap: 8px; } .step-circle { width: 32px; height: 32px; border-radius: 50%; background: var(--border-color); color: white; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; transition: all 0.3s ease; } .step-circle.active { background: var(--primary-gradient); } .step-circle.completed { background: var(--success-color); } .step-line { flex: 1; height: 2px; background: var(--border-color); margin: 0 8px; } .step-label { font-size: 14px; color: var(--text-color); font-weight: 500; } .step-content {...

AI 评审点评

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

【CLAUDE】该实现完成了多步骤表单的基本框架，视觉设计符合要求，状态管理思路正确，XSS防护基本到位。但在细节实现上存在若干缺陷：富文本编辑器的字符限制截断逻辑有问题、感谢页面与步骤切换机制不一致、数据恢复使用.click()方式不稳健、代码缺少模块化注释分区、键盘操作支持不完整。整体属于功能基本可用但存在明显瑕疵的实现，需要进一步打磨才能达到生产级质量。 【GEMINI】这是一个高质量的实现方案。模型不仅精准满足了所有复杂的业务逻辑（多步向导、条件字段、富文本、Web Audio），还在代码组织和 UI/UX 细节上表现出资深工程师的水准。特别是在单文件约束下，自行实现的轻量级组件既简洁又功能完备，完全符合生产级代码的要求。 【KIMI】该实现整体完成了核心功能需求，视觉设计专业且响应式适配良好。但存在若干关键缺陷影响用户体验：条件字段的状态恢复逻辑不完整导致数据可能丢失，富文本编辑器的字符限制实现方式粗暴，以及代码结构中updateUI函数过于臃肿。音效系统和无障碍支持基本达标但有细节瑕疵。建议在条件字段恢复、富文本实时拦截输入、以及代码模块化重构方面进行优化。作为生产级代码，当前状态需要进一步打磨才能达到可直接部署的标准。

相关链接

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

加载中...
100%