表单很棘手。它们是你在 Web 应用程序中最常构建的东西之一，但也可能是最复杂的东西之一。

设计良好的 HTML 表单是

• 结构良好且语义正确的。
• 易于使用和导航（键盘）。
• 使用 ARIA 属性和适当的标签进行访问。
• 支持客户端和服务器端验证。
• 风格良好，与应用程序的其余部分一致。

在本指南中，我们将探讨使用 vee-validate 和 zod 构建表单。我们将使用一个 <FormField> 组件，使用 Radix Vue 组件来组合可访问的表单。

功能

<Form /> 组件是 vee-validate 库的包装器。它提供了一些东西

• 用于构建表单的可组合组件。
• 用于构建受控表单字段的 <FormField /> 组件。
• 使用 zod 进行表单验证。
• 根据状态将正确的 aria 属性应用于表单字段，处理唯一 ID
• 旨在与所有 Radix Vue 组件一起使用。
• 使用自己的架构库。我们使用 zod，但你可以使用任何其他支持的架构验证，如 yup 或 valibot。
• 你可以完全控制标记和样式。

vee-validate 使用两种方式来为你的表单添加验证。

• 组合 API
• 高阶组件 (HOC)

解剖

<Form>
  <FormField v-slot="{ ... }">
    <FormItem>
      <FormLabel />
      <FormControl>
        <!-- any Form Input component or native input elements -->
      </FormControl>
      <FormDescription />
      <FormMessage />
    </FormItem>
  </FormField>
</Form>

示例

Input 组件

<FormField v-slot="{ componentField }">
  <FormItem>
    <FormLabel>Username</FormLabel>
    <FormControl>
      <Input placeholder="shadcn" v-bind="componentField" />
    </FormControl>
    <FormDescription />
    <FormMessage />
  </FormItem>
</FormField>

安装

npx shadcn-vue@latest add form

用法

创建表单架构

使用 Zod 架构定义表单的形状。你可以在 Zod 文档 中阅读更多关于使用 Zod 的内容。

使用 @vee-validate/zod 将 Zod 架构验证与 vee-validate 集成

toTypedSchema 还使表单值和提交值自动类型化，并适用于该架构的输入和输出类型。

<script setup lang="ts">
import { toTypedSchema } from '@vee-validate/zod'
import * as z from 'zod'

const formSchema = toTypedSchema(z.object({
  username: z.string().min(2).max(50),
}))
</script>

定义表单

使用 vee-validate 中的 useForm 可组合函数或使用 <Form /> 组件来创建表单。建议使用 useForm，因为值会自动类型化。

<script setup lang="ts">
import { useForm } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/zod'
import * as z from 'zod'

import {
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage
} from '@/components/ui/form'

const formSchema = toTypedSchema(z.object({
  username: z.string().min(2).max(50),
}))

const form = useForm({
  validationSchema: formSchema,
})

const onSubmit = form.handleSubmit((values) => {
  console.log('Form submitted!', values)
})
</script>

<template>
  <form @submit="onSubmit">
    ...
  </form>
</template>

构建你的表单

基于上一步，我们可以使用 <Form /> 组件或 useForm 可组合函数。建议使用 useForm，因为值会自动类型化。

<script setup lang="ts">
import { useForm } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/zod'
import * as z from 'zod'

import { Button } from '@/components/ui/button'
import {
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form'
import { Input } from '@/components/ui/input'

const formSchema = toTypedSchema(z.object({
  username: z.string().min(2).max(50),
}))

const form = useForm({
  validationSchema: formSchema,
})

const onSubmit = form.handleSubmit((values) => {
  console.log('Form submitted!', values)
})
</script>

<template>
  <form @submit="onSubmit">
    <FormField v-slot="{ componentField }" name="username">
      <FormItem>
        <FormLabel>Username</FormLabel>
        <FormControl>
          <Input type="text" placeholder="shadcn" v-bind="componentField" />
        </FormControl>
        <FormDescription>
          This is your public display name.
        </FormDescription>
        <FormMessage />
      </FormItem>
    </FormField>
    <Button type="submit">
      Submit
    </Button>
  </form>
</template>

完成

就是这样。现在你拥有一个完全可访问的表单，它具有类型安全性和客户端验证。

Username

This is your public display name.

示例

请参阅以下链接，以获取更多关于如何将 vee-validate 功能与其他组件一起使用的示例

• 复选框
• 日期选择器
• 输入框
• 单选组
• 选择器
• 滑块
• 开关
• 文本域
• 组合框

额外

此示例演示了如何使用 Formkit AutoAnimate 为表单添加动画。

Username

This is your public display name.