Zod正则表达式验证域名无效，错误提示无法正常显示

你的代码核心问题是Input组件的输入框没有和React Hook Form的表单状态绑定——没有使用register方法返回的属性挂载到input元素上，导致表单无法追踪输入值，Zod的验证规则自然不会被触发。

具体修改步骤： #

1. 给LabeledInput组件添加register参数
   修改LabelInputProps接口，增加register属性：

   import { UseFormRegister } from 'react-hook-form';
   // ...
   interface LabelInputProps {
     id: string;
     type?: 'text';
     networkError?: Error | null;
     inputError?: FieldError;
     register: UseFormRegister<FormData>; // 新增
   }
   

2. 在Input组件中应用register绑定
   修改Input组件的props，接收register，并将其挂载到input元素上：

   interface InputProps extends LabelInputProps {
     placeHolder: string;
   }
   
   const Input = ({ id, placeHolder, networkError, inputError, type, register }: InputProps) => {
     return (
       <div className="relative mt-2">
         <input
           id={id}
           type={type}
           placeholder={placeHolder}
           {...register(id)} // 关键：绑定register属性
           className={twMerge(
             `w-full border-[1px] pl-3 pr-${networkError ? '10' : '4'} py-2 text-sm rounded-sm`,
             networkError || inputError ? 'border-error-color focus:border-error-color focus:ring-error-color' : 'border-gray-300'
           )}
         />
         {inputError && <p className="text-sm text-red-500">{inputError.message}</p>}
       </div>
     );
   };
   

3. 在LabeledInput中传递register给Input

   const LabeledInput = ({ id, type, networkError, inputError, register }: LabelInputProps) => {
     const name = useMemo(() => upperCaseFirstLetter(id), [id]);
     return (
       <>
         <Label htmlFor={id} name={name} />
         <Input 
           id={id} 
           type={type} 
           placeHolder={name} 
           networkError={networkError} 
           inputError={inputError} 
           register={register} // 传递register
         />
       </>
     );
   };
   

4. 在Form组件中传递register给LabeledInput

   <LabeledInput 
     id="vendor" 
     type="text" 
     networkError={networkError} 
     inputError={errors.vendor} 
     register={register} // 传递register
   />
   

5. 可选：开启实时验证（优化体验）
   如果希望用户输入时就触发验证，而不是只有提交时，修改useForm的配置：

   const {
     register,
     handleSubmit,
     formState: { errors },
   } = useForm<FormData>({ 
     resolver: zodResolver(schema),
     mode: 'onBlur' // 或'onChange'，根据需求选择
   });
   

补充：域名正则优化（可选） #

你的当前正则/^[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/可以覆盖大部分域名场景，但如果需要支持更复杂的域名（比如多级别子域名），可以调整为更严谨的正则：

.regex(/^([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}$/, { message: 'Invalid domain structure' })

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