如何使用react-hook-form+zod实现动态表单验证？-灵析社区

在 `schema email` 中添加 `optional()` 选项   修改过后的完整代码： "use client"; import { useState } from "react"; import { useForm } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; import * as z from "zod"; const FormSchema = z.object({ email: z .string() .email({ message: "邮箱格式不正确", }) .optional(), username: z .string() .min(3, { message: "用户名不得少于3个字符", }) .max(20, { message: "用户名不得多于20个字符", }), password: z .string() .min(8, { message: "密码不得少于8个字符", }) .max(20, { message: "密码不得多于20个字符", }), }); type FormSchemaType = z.infer; const UserForm = () => { const [variant, setVariant] = useState("Login"); const { register, handleSubmit, formState: { errors, isSubmitting }, watch, } = useForm({ resolver: zodResolver(FormSchema), }); const onSubmit = async (data: FormSchemaType) => { await new Promise((resolve) => setTimeout(resolve, 1000)); }; return ( {variant === "Login" ? "登录" : "注册"} {variant === "Register" && ( 邮箱 {errors.email && ( {errors.email.message} )} )} 用户名 {errors.username && ( {errors.username.message} )} 密码 {errors.password && ( {errors.password.message} )} {variant === "Login" ? "还没有账号？去" : "已有账号？去"} setVariant(variant === "Login" ? "Register" : "Login") } > {variant === "Login" ? "注册" : "登录"} 提交 {JSON.stringify(watch(), null, 2)} ); }; export default UserForm;