next中shadcn、React Hook Form、zod 使用教程

要在 Next 项目中结合 shadcn、React Hook Form 和 zod 使用表单验证,可以按照以下步骤来设置和使用这些工具。我们将搭建一个简单的表单,包含姓名和邮箱字段,并使用 zod 进行表单验证, React Hook Form 管理表单状态

1. 安装依赖

首先,确保安装所需的库。

javascript 复制代码
npm install @hookform/resolvers react-hook-form zod

2. 定义表单验证 Schema

使用 zod 定义表单字段的验证规则。zod 的 Schema 将帮助我们在表单中验证输入数据。

javascript 复制代码
// src/schemas/userFormSchema.js

import { z } from 'zod';

export const userFormSchema = z.object({
  name: z.string().min(1, { message: '姓名不能为空' }),
  email: z.string().email({ message: '无效的邮箱格式' }),
});

3. 创建表单组件

在表单组件中使用 React Hook FormzodResolver

zodResolver 是一个适配器,它将 Zod 的 schema 用于 React Hook Form 的验证。在提交表单时,它会自动验证输入数据是否符合 Zod 定义的规则。

javascript 复制代码
// src/components/UserForm.js

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { userFormSchema } from '@/schemas/userFormSchema';
import { useState } from 'react';

export default function UserForm() {
  const [submitMessage, setSubmitMessage] = useState('');
  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: zodResolver(userFormSchema),
  });

  const onSubmit = (data) => {
    console.log('Form Data:', data);
    setSubmitMessage('表单提交成功');
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
      {/* 姓名字段 */}
      <div>
        <label className="block text-sm font-medium text-gray-700">姓名</label>
        <input
          type="text"
          {...register('name')}
          className="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
        />
        {errors.name && <p className="text-sm text-red-500">{errors.name.message}</p>}
      </div>

      {/* 邮箱字段 */}
      <div>
        <label className="block text-sm font-medium text-gray-700">邮箱</label>
        <input
          type="email"
          {...register('email')}
          className="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
        />
        {errors.email && <p className="text-sm text-red-500">{errors.email.message}</p>}
      </div>

      {/* 提交按钮 */}
      <button
        type="submit"
        className="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
      >
        提交
      </button>

      {/* 提交状态信息 */}
      {submitMessage && <p className="text-sm text-green-500">{submitMessage}</p>}
    </form>
  );
}

4. 使用 shadcn UI 组件样式

通过 shadcn 的样式,可以自定义表单的外观。例如,可以将输入框样式更改为 @/components/ui/input 或按钮样式为 @/components/ui/button

javascript 复制代码
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';

export default function UserForm() {
  // 代码同上
  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
      <div>
        <label className="block text-sm font-medium text-gray-700">姓名</label>
        <Input type="text" {...register('name')} />
        {errors.name && <p className="text-sm text-red-500">{errors.name.message}</p>}
      </div>
      <div>
        <label className="block text-sm font-medium text-gray-700">邮箱</label>
        <Input type="email" {...register('email')} />
        {errors.email && <p className="text-sm text-red-500">{errors.email.message}</p>}
      </div>
      <Button type="submit">提交</Button>
      {submitMessage && <p className="text-sm text-green-500">{submitMessage}</p>}
    </form>
  );
}

5. 将组件添加到页面

在页面文件中导入并使用 UserForm 组件:

javascript 复制代码
import UserForm from '@/components/UserForm';

export default function HomePage() {
  return (
    <div className="p-4">
      <h1 className="text-xl font-semibold">用户注册</h1>
      <UserForm />
    </div>
  );
}
相关推荐
.net开发1 分钟前
WPF使用Prism框架首页界面
前端·c#·.net·wpf
名字越长技术越强20 分钟前
vue--vueCLI
前端·javascript·vue.js
是个热心市民22 分钟前
构建一个导航栏web
前端·javascript·python·django·html
J不A秃V头A34 分钟前
报错:npm : 无法加载文件 C:\Program Files\nodejs\npm.ps1,因为在此系统上禁止运行脚本。
前端·npm·node.js
GDAL35 分钟前
npm入门教程14:npm依赖管理
前端·npm·node.js
余生H36 分钟前
即时可玩web小游戏(二):打砖块(支持移动端版) - 集成InsCode快来阅读并即时体验吧~
前端·javascript·inscode·canvas·h5游戏
5335ld1 小时前
vue+exceljs前端下载、导出xlsx文件
前端·vue.js
摇头的金丝猴1 小时前
uniapp vue3 使用echarts-gl 绘画3d图表
前端·uni-app·echarts
清清ww1 小时前
【TS】九天学会TS语法---计划篇
前端·typescript
南棱笑笑生2 小时前
20241105编译Rockchip原厂的Android13并给荣品PRO-RK3566开发板刷机
java·开发语言·前端