极客观点
项目管理
HarmonyOS
如何使用react-hook-form+zod实现动态表单验证？比如登陆时不需要输入邮箱，注册时需要输入邮箱
{variant === "Register" && (
<div className="space-y-2">
<label htmlFor="email" className="inline font-semibold">
邮箱
</label>
<input
id="email"
{...register("email", { shouldUnregister: true })}
type="text"
className="w-full rounded bg-gray-100 px-3 py-1.5 outline-none"
/>
{errors.email && (
<p className="text-sm text-rose-500">{errors.email.message}</p>
)}
</div>
)}大概的样子：
以下是完整代码，无法实现对 email 项的校验
"use client";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import * as z from "zod";
const LoginFormSchema = z.object({
username: z
.string()
.min(3, {
message: "用户名不得少于3个字符",
})
.max(20, {
message: "用户名不得多于20个字符",
}),
password: z
.string()
.min(8, {
message: "密码不得少于8个字符",
})
.max(20, {
message: "密码不得多于20个字符",
}),
});
const RegisterFormSchema = z.object({
email: z.string().email({
message: "邮箱格式不正确",
}),
username: z
.string()
.min(3, {
message: "用户名不得少于3个字符",
})
.max(20, {
message: "用户名不得多于20个字符",
}),
password: z
.string()
.min(8, {
message: "密码不得少于8个字符",
})
.max(20, {
message: "密码不得多于20个字符",
}),
});
const FormSchema = z.union([LoginFormSchema, RegisterFormSchema]);
type FormSchemaType = z.infer<typeof FormSchema>;
const UserForm = () => {
const [variant, setVariant] = useState<"Login" | "Register">("Login");
const {
register,
handleSubmit,
formState: { errors, isSubmitting },
watch,
} = useForm<FormSchemaType>({
resolver: zodResolver(FormSchema),
defaultValues: {
username: "",
password: "",
},
});
const onSubmit = async (data: FormSchemaType) => {
await new Promise((resolve) => setTimeout(resolve, 1000));
};
return (
<div className="flex min-h-screen items-center justify-center bg-gray-100">
<div className="max-w-md flex-1">
<form
onSubmit={handleSubmit(onSubmit)}
className="space-y-4 rounded-lg bg-white p-6 shadow-xl"
>
<h2 className="text-center text-xl font-semibold">
{variant === "Login" ? "登录" : "注册"}
</h2>
{variant === "Register" && (
<div className="space-y-2">
<label htmlFor="email" className="inline font-semibold">
邮箱
</label>
<input
id="email"
{...register("email", { shouldUnregister: true })}
type="text"
className="w-full rounded bg-gray-100 px-3 py-1.5 outline-none"
/>
{errors.email && (
<p className="text-sm text-rose-500">{errors.email.message}</p>
)}
</div>
)}
<div className="space-y-2">
<label htmlFor="username" className="inline font-semibold">
用户名
</label>
<input
id="username"
{...register("username")}
type="text"
className="w-full rounded bg-gray-100 px-3 py-1.5 outline-none"
/>
{errors.username && (
<p className="text-sm text-rose-500">{errors.username.message}</p>
)}
</div>
<div className="space-y-2">
<label htmlFor="password" className="inline font-semibold">
密码
</label>
<input
id="password"
{...register("password")}
type="password"
className="w-full rounded bg-gray-100 px-3 py-1.5 outline-none"
/>
{errors.password && (
<p className="text-sm text-rose-500">{errors.password.message}</p>
)}
</div>
<p className="text-right text-sm">
{variant === "Login" ? "还没有账号？去" : "已有账号？去"}
<span
className="cursor-pointer font-semibold underline"
onClick={() =>
setVariant(variant === "Login" ? "Register" : "Login")
}
>
{variant === "Login" ? "注册" : "登录"}
</span>
</p>
<button
type="submit"
className="w-full rounded-md bg-zinc-900 px-4 py-2 text-sm text-white hover:bg-zinc-900/90 disabled:cursor-not-allowed disabled:bg-gray-500"
disabled={isSubmitting}
>
提交
</button>
</form>
<code>
<pre className="p-2">{JSON.stringify(watch(), null, 2)}</pre>
</code>
</div>
</div>
);
};
export default UserForm;
在
schema email中添加optional()选项修改过后的完整代码：