在上一章中，我们了解了如何捕获错误（包括404错误）并向用户显示回退。但是，我们仍然需要讨论难题的另一个部分：表单验证。让我们看看如何使用 Server Actions 实现服务器端验证，以及如何使用 React 的useActionState钩子——同时牢记可访问性。
什么是可访问性？
可访问性是指设计和实现每个人都可以使用的Web应用程序，包括残障人士。这是一个广泛的主题，涵盖许多领域，例如键盘导航、语义HTML、图像、颜色、视频等。虽然我们不会在本课程中深入探讨可访问性，但我们将讨论Next.js中可用的可访问性功能以及一些使您的应用程序更易于访问的常见做法。
提高表单可访问性方法
我们已采取三项措施来改善表单的可访问性：
- 语义 HTML：使用语义元素（、等）代替。这允许辅助技术 (AT) 专注于输入元素并向用户提供适当的上下文信息，使表单更易于导航和理解。
- 标签：包括和htmlFor属性可确保每个表单字段都有描述性文本标签。这通过提供上下文来改善 AT 支持，并通过允许用户单击标签以关注相应的输入字段来增强可用性。
- 焦点轮廓：字段的样式经过适当调整，在焦点对准时会显示轮廓。这对于可访问性至关重要，因为它可以直观地指示页面上的活动元素，帮助键盘和屏幕阅读器用户了解他们在表单上的位置。您可以按 来验证这一点tab。
表单验证
转到http://172.16.100.104/dashboard/invoices/create，并提交一个空表单。会发生什么？会收到错误,这是因为您向服务器操作发送了空表单值。您可以通过在客户端或服务器上验证表单来防止这种情况。
客户端验证
有几种方法可以在客户端验证表单。最简单的方法是依靠浏览器提供的表单验证，方法是将required属性添加到表单中的<input>和<select>元素。例如：
<input
id="amount"
name="amount"
type="number"
placeholder="Enter USD amount"
className="peer block w-full rounded-md border border-gray-200 py-2 pl-10 text-sm outline-2 placeholder:text-gray-500"
required
/>
编辑/app/ui/invoices/create-form.tsx组件，在input上面加入required
再次提交表单。如果您尝试提交包含空值的表单，浏览器将显示警告。这种方法通常是可以的，因为一些AT支持浏览器验证。客户端验证的替代方案是服务器端验证。
如果你想看更多内容或者能够看到技术更新的内容，请百度搜索：曲速引擎 warp drive csdn 在首页找到我的地址访问即可，一线更新内容将会在我的个人博客上面更新，谢谢大家。
更详细内容查看
独立博客 https://www.dataeast.cn/
CSDN博客 https://blog.csdn.net/siberiaWarpDrive
B站视频空间 https://space.bilibili.com/25871614?spm_id_from=333.1007.0.0
关注 “曲速引擎 Warp Drive” 微信公众号
