如何用 Formsnap + Superforms 构建完整的用户设置表单-尧图网络科技

如何用 Formsnap + Superforms 构建完整的用户设置表单

【免费下载链接】formsnapFunctional, accessible, and powerful form components for Svelte. 🫰项目地址: https://gitcode.com/gh_mirrors/for/formsnap

Formsnap 是一个功能强大、可访问且高效的 Svelte 表单组件库，而 Superforms 则是 SvelteKit 生态中领先的表单处理工具。将两者结合使用，能够轻松构建出既美观又功能完善的用户设置表单，让表单开发变得简单而高效。

准备工作：安装与基础配置

要开始使用 Formsnap 和 Superforms，首先需要安装必要的依赖。由于 Formsnap 是基于 Superforms 构建的，因此需要同时安装这两个库，以及一个 schema 验证库，我们推荐使用 Zod。

安装依赖

npm install formsnap sveltekit-superforms zod

基本项目结构

在开始构建用户设置表单之前，让我们了解一下 Formsnap 的基本项目结构，这将帮助我们更好地组织代码：

核心组件：位于packages/formsnap/src/lib/components/目录下，包含构建表单所需的各种组件，如Field.svelte、Control.svelte、Label.svelte等。
工具函数：位于packages/formsnap/src/lib/internal/utils/目录下，提供了处理表单属性、错误信息等的实用工具。

构建用户设置表单的步骤

步骤 1：定义表单 Schema

使用 Zod 定义用户设置表单的 schema，这将帮助我们进行表单验证和类型检查。以下是一个基本的用户设置表单 schema 示例：

import { z } from 'zod'; export const userSettingsSchema = z.object({ name: z.string().min(2, '姓名至少需要 2 个字符'), email: z.string().email('请输入有效的邮箱地址'), password: z.string().optional(), notifications: z.object({ email: z.boolean().default(true), push: z.boolean().default(false) }), theme: z.enum(['light', 'dark', 'system']).default('system') });

步骤 2：设置 Superforms

在 SvelteKit 的 load 函数中设置 Superforms，将表单数据和验证逻辑集成到页面中：

// src/routes/settings/+page.server.ts import { superValidate } from 'sveltekit-superforms/server'; import { userSettingsSchema } from '$lib/schemas'; export const load = async ({ locals }) => { const user = await locals.getUser(); const form = await superValidate(user, userSettingsSchema); return { form }; };

步骤 3：使用 Formsnap 组件构建表单

现在，我们可以使用 Formsnap 提供的组件来构建用户设置表单。Formsnap 提供了一系列组件，如Field、Label、Control、FieldErrors等，这些组件可以帮助我们快速构建出符合可访问性标准的表单。

以下是一个基本的用户设置表单示例：

<!-- src/routes/settings/+page.svelte --> <script lang="ts"> import { superForm } from 'sveltekit-superforms/client'; import { Field, Label, Control, Description, FieldErrors, Fieldset, Legend } from 'formsnap'; import type { PageData } from './$types'; export let data: PageData; const { form, errors, enhance } = superForm(data.form); </script> <form method="POST" use:enhance> <Field {form} name="name"> <Label>姓名</Label> <Control> <input type="text" bind:value={$form.name} /> </Control> <Description>请输入您的真实姓名</Description> <FieldErrors /> </Field> <Field {form} name="email"> <Label>邮箱</Label> <Control> <input type="email" bind:value={$form.email} /> </Control> <Description>用于登录和接收通知</Description> <FieldErrors /> </Field> <Field {form} name="password"> <Label>密码（选填）</Label> <Control> <input type="password" bind:value={$form.password} /> </Control> <Description>留空则不修改密码</Description> <FieldErrors /> </Field> <Fieldset {form} name="notifications"> <Legend>通知设置</Legend> <Description>选择您希望接收的通知类型</Description> <Field name="email"> <Control> <input type="checkbox" bind:value={$form.notifications.email} /> <Label>邮件通知</Label> </Control> </Field> <Field name="push"> <Control> <input type="checkbox" bind:value={$form.notifications.push} /> <Label>推送通知</Label> </Control> </Field> <FieldErrors /> </Fieldset> <Field {form} name="theme"> <Label>主题</Label> <Control> <select bind:value={$form.theme}> <option value="light">浅色</option> <option value="dark">深色</option> <option value="system">跟随系统</option> </select> </Control> <FieldErrors /> </Field> <button type="submit">保存设置</button> </form>

关键组件解析

Field 组件

Field组件是 Formsnap 的核心组件之一，它负责管理单个表单字段的状态和验证。通过name属性指定字段名称，Field组件会自动处理与 Superforms 的集成。

Fieldset 和 Legend 组件

当需要对多个相关字段进行分组时，可以使用Fieldset和Legend组件。Fieldset用于包裹相关字段，Legend则提供分组标题，这有助于提高表单的可访问性。

Control 组件

Control组件用于包裹表单控件（如输入框、复选框等），它会自动添加必要的属性（如name、id等），确保表单控件与标签正确关联。

FieldErrors 组件

FieldErrors组件用于显示表单字段的验证错误信息。它会自动从 Superforms 获取错误信息，并以可访问的方式展示给用户。

高级技巧：动态表单字段

有时，用户设置表单可能需要包含动态字段，例如允许用户添加多个联系人或地址。Formsnap 与 Superforms 结合使用，可以轻松实现这一功能。

以下是一个动态添加联系方式的示例：

<Field {form} name="contacts"> <Label>联系方式</Label> <Description>添加您的联系方式</Description> {#each $form.contacts as contact, index} <div class="contact-item"> <Field name={`contacts.${index}.type`}> <Control> <select bind:value={contact.type}> <option value="phone">电话</option> <option value="email">邮箱</option> </select> </Control> </Field> <Field name={`contacts.${index}.value`}> <Control> <input type="text" bind:value={contact.value} /> </Control> <FieldErrors /> </Field> <button type="button" on:click={() => $form.contacts.splice(index, 1)}> 删除 </button> </div> {/each} <button type="button" on:click={() => $form.contacts.push({ type: 'phone', value: '' })}> 添加联系方式 </button> <FieldErrors /> </Field>