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>
  );
}
相关推荐
脑袋大大的15 分钟前
判断当前是否为钉钉环境
开发语言·前端·javascript·钉钉·企业应用开发
军军君0125 分钟前
基于Springboot+UniApp+Ai实现模拟面试小工具二:后端项目搭建
前端·javascript·spring boot·spring·微信小程序·前端框架·集成学习
quweiie1 小时前
tp8.0\jwt接口安全验证
前端·安全·jwt·thinkphp
xiaoyan20151 小时前
最新Flutter3.32+Dart3仿微信App聊天实例
前端·flutter·dart
汪敏wangmin2 小时前
Fiddler-抓包后直接生成Loadrunner脚本或者Jmeter脚本
前端·jmeter·fiddler
彤银浦2 小时前
Web学习笔记3
前端·笔记·学习·html5
江城开朗的豌豆2 小时前
退出登录后头像还在?这个缓存问题坑过多少前端!
前端·javascript·vue.js
江城开朗的豌豆3 小时前
Vue的'读心术':它怎么知道数据偷偷变了?
前端·javascript·vue.js
江城开朗的豌豆3 小时前
手把手教你造一个自己的v-model:原来双向绑定这么简单!
前端·javascript·vue.js
我在北京coding3 小时前
el-tree 懒加载 loadNode
前端·vue.js·elementui