Next.js中react-hook-form结合Zod实现可选URL字段验证问题

你遇到的问题核心是Zod链式校验的逻辑顺序，以及react-hook-form对空白输入的默认处理：

问题根源 #

• 当你写z.string().url().optional()时，Zod的校验逻辑是：值必须是符合URL格式的字符串，或者是undefined。但输入框空白时，react-hook-form默认返回空字符串""，它属于字符串类型但不符合url()校验规则，因此触发错误。
• 而z.string().optional()之所以生效，是因为它允许字符串（包括空字符串）或undefined，空字符串本身符合string()的要求。

几种可行的解决方法 #

方法1：调整输入框值的转换逻辑

在注册输入框时，把空字符串转为undefined，让z.string().url().optional()能正常识别可选值：

// 修正输入框id并添加setValueAs配置
<input
  id="website-input"
  type="text"
  className={`block border text-lg px-4 py-3 mt-2  border-gray-200 focus:bg-white text-gray-900 focus:ring-purpleLight focus:ring-2 outline-none w-full  disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed`}
  {...register("website", {
    setValueAs: (val) => val.trim() === "" ? undefined : val
  })}
  disabled={isSubmitting}
  placeholder="Website"
/>

对应的Zod Schema保留原写法即可：

const FormSchema = z.object({
  website: z.string().url().optional()
});

方法2：在Zod Schema中兼容空字符串

不想修改输入框配置的话，让Schema同时接受空字符串和有效URL，再标记为可选：

// 链式写法更简洁
const FormSchema = z.object({
  website: z.string().url().or(z.literal("")).optional()
});

这种写法下，空字符串""会被z.literal("")匹配，不会触发URL校验错误，同时也支持undefined值。

方法3：用refine自定义校验逻辑

需要更灵活规则时（比如允许空字符串、undefined或有效URL），可以用Zod的refine方法：

const FormSchema = z.object({
  website: z.string().optional().refine(
    (val) => val === undefined || z.string().url().safeParse(val).success,
    { message: "请输入有效的URL地址" }
  )
});

逻辑是：值存在时必须符合URL格式，是undefined则直接通过。

注意点 #

• 输入框id建议和字段名对应（修正为website-input），避免混淆。
• 若要忽略首尾空格，可在setValueAs中加入trim()，防止用户输入空格被误判为有效内容。

内容的提问来源于stack exchange，提问作者OWolf