表单
NextUI 提供了内置验证和样式的表单组件，以帮助用户有效地输入和提交数据。
标签和帮助文本
可访问的表单从每个字段清晰、描述性的标签开始。所有 NextUI 表单组件都支持使用 Label 组件进行标签，该组件会自动通过 id 和 for 属性代表您与字段关联。
此外，NextUI 组件支持帮助文本，它将额外的上下文（例如描述或错误消息）与字段关联。当用户聚焦字段时，辅助技术（如屏幕阅读器）会朗读标签和帮助文本。
大多数字段都应该有一个可见的标签。在极少数情况下，必须提供 aria-label 或 aria-labelledby 属性，以便向屏幕阅读器标识元素。
提交数据
如何提交表单数据取决于您的框架、应用程序和服务器。默认情况下，HTML 表单通过浏览器中的完整页面刷新提交。您可以在 onSubmit 事件中调用 preventDefault 来通过 API 处理表单数据提交。
像 Next.js、Remix 和 React Router 等框架提供了自己的方法来处理表单提交。
非受控表单
获取表单数据的一个简单方法是在 onSubmit 事件期间使用浏览器的 FormData API。您可以将此数据发送到后端 API，或者使用 Object.fromEntries 将其转换为 JavaScript 对象。每个字段都应该有一个 name 属性来标识它，并且这些值将由浏览器序列化为字符串。
受控表单
NextUI 表单组件默认是非受控的，但如果您需要实时管理状态，可以使用 useState hook 使组件受控。
自定义错误消息
默认情况下，错误消息由浏览器提供。您可以通过向 errorMessage 属性提供一个函数来自定义这些消息。
注意：默认的错误消息由浏览器根据浏览器/操作系统语言设置进行本地化。NextUI Provider 中的 locale 设置 不会影响验证错误。
验证
表单验证对于确保用户输入正确的数据至关重要。NextUI 支持原生 HTML 约束验证，并允许自定义验证和实时验证。
内置验证
NextUI 表单组件支持 原生 HTML 验证 属性，例如 isRequired 和 minLength。当用户提交更改（例如，在失去焦点时）或提交表单时，浏览器会检查这些约束。您可以使用自定义样式而不是浏览器的默认 UI 来显示验证错误。
要启用原生验证，请设置 validationBehavior="native"。默认情况下，设置 validationBehavior="aria"，这只会将字段标记为辅助技术的必需或无效，而不会阻止表单提交。您可以使用 NextUI Provider 为整个应用程序更改表单默认值。
支持的约束包括
isRequired表示在提交表单之前，字段必须具有值。minValue和maxValue指定日期选择器或数字字段中的最小值和最大值。minLength和maxLength指定文本输入的最小和最大长度。pattern提供文本输入必须符合的自定义正则表达式。type="email"和type="url"为电子邮件地址和 URL 提供内置验证。
有关支持的验证属性的更多详细信息，请参阅每个组件的文档。
自定义验证
除了内置的约束，你还可以为 validate 属性提供一个函数来支持自定义验证。
实时验证
如果你想在用户输入时显示验证错误，你可以控制字段的值，并使用 isInvalid 属性以及 errorMessage 属性。
使用 validationBehavior="aria" 允许在字段无效时仍然提交表单，同时保持可访问性。
服务器端验证
客户端验证提供即时反馈，但你还应该在服务器端验证数据，以确保准确性和安全性。NextUI 允许你通过在 Form 组件中使用 validationErrors 属性来显示服务器端验证错误。此属性应该是一个对象，其中每个键是字段的 name，值是错误消息。
Schema 验证
NextUI 支持来自 schema 验证库（如 Zod）的错误。你可以使用 Zod 的 flatten 方法来获取每个字段的错误消息，并将它们作为服务器响应的一部分返回。
React Server Actions
Server Actions 允许将表单无缝提交到服务器并检索结果。useActionState hook 可用于在提交表单后获取服务器操作的结果（例如错误）。
Remix
Remix actions 处理服务器上的表单提交。你可以使用 useSubmit hook 将表单数据提交到服务器，并使用 useActionData hook 从服务器检索验证错误。
表单库
在大多数情况下，NextUI 的内置验证功能已足够。但是，如果你正在构建更复杂的表单或将 NextUI 组件集成到现有表单中，你可以使用诸如 React Hook Form 或 Formik 等表单库。
React Hook Form
你可以使用 Controller 集成 NextUI 组件。Controller 允许你管理字段值和验证错误，并在 NextUI 组件中反映验证结果。
有关 NextUI 中表单的更多信息，请访问 React Aria 表单指南。
