Summary

本周围绕“表单与用户交互”展开，在回顾前3周的组件与响应式基础上，系统梳理了四块内容：用户体验（UX）、Web 常见脆弱性、验证策略、以及表单验证实践。教学与评估方面，老师确认 Assignment 1.1 已提交、预计约 10 天内给出反馈；同时提醒 eFolio 需按“双周”提交，若完成度低于 50% 则相关作业分数将被封顶，并请同学们尽快着手实现 Assignment 1.2。A1.2 的范围以业务需求 A、B 为主，数据来源采用本地 JSON（本阶段不要求外部数据接入）。在技术与设计层面，课程强调通过渐进披露、内联校验、清晰标签与响应式布局等手段优化 UX；在安全层面，结合 XSS、CSRF、SQL 注入等典型弱点，说明 Vue 在插值与动态属性绑定处对脚本注入的默认防护思路。最后结合常见表单元素与事件处理，给出“现场校验、密码强度提示、禁用提交”等验证与交互模式示例，为后续版本实现与评测打下基础。

1) 课程与评估安排

• A1.1：已收齐，反馈时间约 10 天内（Moodle 查看）。
• eFolio：按每两周提交；若累计完成度 <50%，相关作业分数封顶 50%。
• A1.2 开始实现：本阶段聚焦业务需求 A、B。
• 数据来源：使用本地 JSON，暂不接入外部数据源（Fetch/XHR 将在后续周讲解）。

2) UX 关键点与实践

• 强调渐进披露、自动填充/建议、内联校验、最少必填、视觉线索；
• 清晰标签、有效错误信息、可访问性、响应式布局、反馈回路。

3) Web 脆弱性与安全提示

• 典型弱点：XSS、CSRF、SQL 注入、恶意数据；
• Vue 层面：对插值与动态属性绑定的脚本注入有默认防护思路。

4) 表单交互与验证

• 常见表单元素：Text/Radio/Checkbox/Dropdown/Select/Textarea/Button；常用事件：@focus/@blur/@change/@input/@click/@submit。
• HTML/前端验证：必填、最小/最大值、类型指示、长度、模式匹配；
• UX 提升：实时校验、密码强度指示、禁用提交按钮；
• 自定义验证：多字段、条件式校验。

5) 响应式与 Bootstrap 要点（课堂演示）

• 复习12 栅格与断点：col-{size}-{n} 表示在对应断点下列宽；一行总和建议为 12。

6) 技术栈与后续关注

• 栈：前端 Vue.js；后续周引入 Firebase 作为认证与后端数据库。
• Version 2 展望：围绕安全/认证与角色（如 Admin/Volunteer/Patron 等）扩展需求，注意基于角色的可见性/访问控制设计。