本周，我们将探索如何使用 HTML 和 JavaScript 验证表单。你将学习如何利用 HTML 内置的表单验证功能，以及如何通过 JavaScript 实现自定义验证，从而确保表单既 用户友好 又可靠。此外，我们还将介绍 PrimeVue —— 一个完整的 Vue.js UI 组件套件，包含丰富的 UI 组件、图标、区块和应用模板。

HTML Built-in Form Validation
学习如何使用 HTML 表单验证功能。这些功能通常不需要太多 JavaScript，性能比基于 JavaScript 的验证更好，但可定制性相对较低。
JavaScript Validation
探索如何使用 JavaScript 进行表单验证。它完全可定制，允许开发者根据特定需求量身定制验证逻辑。
Introduction to PrimeVue
了解 PrimeVue —— 一个 Vue.js 的 UI 组件库。学习如何将 PrimeVue 集成到 Vue 项目中，并使用它的组件来增强 Web 应用。

Overview: Lab

HTML Built-in and JavaScript Form Validations
PrimeVue DataTable

EFOLIO TASK 4.1 (PASS AND CREDIT LEVEL)

展开内容

DESCRIPTION:

理解并实现 HTML 内置验证与 JavaScript 表单验证
在 VueJS 应用中展示带有规定验证规则的表单

WHAT TO SUBMIT (INDIVIDUAL):

截图 1：VueJS 应用中启用验证的截图，展示完成 活动 1–3
你应当提交 多个截图，分别展示每个活动的完成情况

EVALUATION CRITERIA:

所有活动均正确完成

EFOLIO TASK 4.2 (DISTINCTION AND HIGH DISTINCTION LEVEL)

展开内容

DESCRIPTION:

在 eFolio 4.1 项目 (VueJS 表单验证应用) 的基础上扩展：

添加额外验证（不包括活动 1–3 的验证），使验证总数达到 5 个
使用 PrimeVue DataTable 展示用户提交的信息
将代码推送到 GitHub 私有仓库，并与导师共享

WHAT TO SUBMIT (INDIVIDUAL):

前端截图：展示支持 额外验证 的表单
前端截图：展示 PrimeVue DataTable 显示用户提交信息
代码截图：展示实现额外验证和 PrimeVue DataTable 的代码
GitHub 提交历史截图：展示项目更新记录

EVALUATION CRITERIA:

用户信息表单支持 额外验证
PrimeVue DataTable 正确显示提交的用户信息
GitHub 历史记录中包含成功的推送

Introduction to HTML Built-in and JavaScript Form Validations

HTML built-in form validation

现代表单控件的一大优势是：无需依赖 JavaScript，就能验证大多数用户输入的数据。

这是通过在表单元素上添加 验证属性 (validation attributes) 实现的，包括：

required：指定表单字段在提交前必须填写。
minlength 与 maxlength：指定文本数据的最小与最大长度。
min 与 max：指定数值输入类型的最小值与最大值。
type：指定数据类型，如数字、邮箱地址或其他预设类型。
pattern：指定一个正则表达式，要求用户输入的数据必须符合该模式。

👉 如果用户输入的数据满足以上属性设定的所有规则，则被视为 有效 (valid)；否则被视为 无效 (invalid)。

当元素有效时：

元素匹配 CSS 伪类 :valid，可以为有效元素应用特定样式。
用户提交表单时，浏览器会允许提交（前提是没有其他因素阻止提交，如 JavaScript）。

当元素无效时：

元素匹配 CSS 伪类 :invalid，有时还会匹配其他伪类（如 :out-of-range），可为无效元素应用特定样式。
用户尝试提交时，浏览器会阻止表单提交并显示错误提示。

⚠️ 注意：以下错误会阻止表单提交：

badInput（错误输入）
patternMismatch（模式不匹配）
rangeOverflow / rangeUnderflow（超出范围）
stepMismatch（步长不匹配）
tooLong / tooShort（长度过长或过短）
typeMismatch（类型不匹配）
valueMissing（值缺失）
customError（自定义错误）

JavaScript Form Validation

如果你想 控制错误提示的样式与逻辑，通常会使用 JavaScript 来实现自定义表单验证。

常见步骤如下：

数据获取 (Data Retrieval)
- 获取表单各个字段的值，例如姓名、地址、邮箱、密码。
数据验证 (Data Validation)
- 姓名验证：检查姓名是否为空，或是否包含数字。
- 地址验证：确保地址字段不为空。
- 邮箱验证：验证邮箱是否不为空，并且包含 @ 符号。
- 密码验证：确保密码不为空，并且满足最小或最大长度要求。
错误处理 (Error Handling)
- 如果验证失败，则显示提示信息（alert 或自定义 UI）。
- 将光标聚焦回对应的输入框，引导用户修正错误。
提交控制 (Submission Control)
- 若所有验证都通过，返回 true，允许提交表单。
- 否则返回 false，阻止提交。
焦点调整 (Focus Adjustment)
- 将焦点定位在第一个未通过验证的字段，提醒用户优先修正该输入。

1. Lab Set-up

上周，我们在图书馆 Web 应用中添加了 用户信息表单，并借助 Bootstrap 5 让其更加用户友好。

然而，目前表单还 缺乏输入约束，用户可以随意提交任何数据。

这可能导致信息不正确，甚至在某些情况下，恶意输入可能会危害我们的应用。

因此，在表单提交前进行 用户输入验证 非常重要，以确保：

✅ 数据准确性 (Data Accuracy)

通过验证用户输入，我们能确保收集到的信息准确可靠。
这些准确性对于提供个性化的用户体验至关重要。
例如，如果我们收集了正确的用户偏好和人口统计数据，就可以推荐符合他们兴趣的书籍和作者，使应用对他们更有用、更有吸引力。

✅ 安全性 (Security)

验证表单输入有助于保护应用免受恶意输入的攻击。
如果缺乏验证，用户可能输入脚本或 SQL 注入，从而破坏数据库或泄露敏感信息。
通过实现适当的验证，可以确保应用只处理安全且符合预期的数据，从而保障系统完整性和用户数据安全。

✅ 用户体验 (User Experience)

对用户输入提供即时反馈能够提升整体用户体验。
当用户出错（例如漏填必填项或输入格式错误）时，验证可以立即提示他们修正错误。
这样不仅能避免用户沮丧，还能使表单更容易、更直观地完成。
一个流畅、响应及时的表单会提高用户满意度，并鼓励他们准确填写所需信息。

Activity 1: Run Form Vue component

2. Valiate User Input with HTML Built-in Form Validation

Activity 2: Add Form Validation with HTML Built-in Attributes

3. Form Validation using Vue

虽然 HTML 表单提供了基础验证，但它有一些局限性：

验证规则有限：内置规则较基础，只能处理必填、最小/最大长度、简单正则等场景，缺乏复杂逻辑的灵活性。
错误信息样式不可定制：错误提示由浏览器默认样式控制，无法与应用设计保持一致，影响整体体验。
验证行为受限：内置验证通常只在提交时触发，提示信息固定，开发者无法自定义，更不一定符合最佳用户引导。
提交会刷新页面：带内置验证的表单提交时往往触发整页刷新，这在现代 Web 应用中会破坏流畅体验。

👉 因此，我们接下来要用 Vue 来实现更灵活的表单验证

Activity 3: Add Form Validation using Vue

4. Display User Information with PrimeVue DataTable

我们使用 Bootstrap 卡片展示了用户提交的信息。虽然这种方法有助于我们查看用户提交的信息，但随着用户数量的增加，页面会变得非常繁琐，充斥着大量的卡片。为了更高效地显示这些信息，我们将利用 PrimeVue 的 DataTable 组件。

4.1 Introduction to PrimeVue

PrimeVue 是一款全面的 Vue.js UI 套件，包含丰富的 UI 组件、图标、区块和应用模板。其主要目标是通过提供可复用、可定制的解决方案来提高开发人员的生产力。

Week 4 Studio: Validating Form with HTML and JavaScript

Week 4 Studio: Validating Form with HTML and JavaScript

Summary

Overview: Content

Overview: Lab

EFOLIO TASK 4.1 (PASS AND CREDIT LEVEL)

DESCRIPTION:

WHAT TO SUBMIT (INDIVIDUAL):

EVALUATION CRITERIA:

EFOLIO TASK 4.2 (DISTINCTION AND HIGH DISTINCTION LEVEL)

DESCRIPTION:

WHAT TO SUBMIT (INDIVIDUAL):

EVALUATION CRITERIA:

Introduction to HTML Built-in and JavaScript Form Validations

HTML built-in form validation

JavaScript Form Validation

1. Lab Set-up

2. Valiate User Input with HTML Built-in Form Validation

3. Form Validation using Vue

4. Display User Information with PrimeVue DataTable

4.1 Introduction to PrimeVue

Theming

Pass-Through

Accessibility

Add-Ons

4.2 Introduction to PrimeVue DataTable

What is a DataTable?

Why Use PrimeVue DataTable?

Key Features

4.3 Activity 4: Install PrimeVue into the Library Web Application

Advanced Tasks - Industry Taster