8、表单处理与验证的全面指南

表单处理与验证的全面指南

1. 表单简介

表单用于收集用户输入并将其提交到远程 URL 或 API 端点。现代浏览器具备多种内置的表单输入类型，可用于处理文本、数字、颜色等。表单是获取用户输入的主要方式之一。

1.1 FormData API

FormData API 提供了一种访问表单数据的数据模型，避免了手动查找单个 DOM 元素并获取其值的麻烦。获取 FormData 对象后，可直接将其传递给 Fetch API 来提交表单，还能在提交前修改或添加数据。

1.2 表单验证

为防止用户发送无效数据，应添加客户端表单验证。过去，开发者通常需借助 JavaScript 库进行表单验证，这可能因数据重复而带来问题。HTML5 新增了一些内置验证选项，如将字段标记为必填、指定数字字段的最小值和最大值、使用正则表达式验证字段输入等。这些选项可作为 <input> 元素的属性使用。

浏览器会显示基本的验证错误消息，但样式可能与应用设计不匹配。可使用 Constraint Validation API 检查内置验证结果，执行自定义验证逻辑并设置自定义验证消息。验证表单时，调用其 checkValidity 方法，若所有字段有效则返回 true ，否则返回 false ，且每个无效字段会触发 invalid 事件。每个表单字段都有一个 validity 对象，反映当前的有效性状态。

2. 从本地存储填充表单字段 <