如何在React Hook Form中点击第三方登录按钮时禁用Zod验证？

优先推荐：第三方登录按钮独立处理，不经过表单提交逻辑 #

谷歌/GitHub登录不需要依赖用户名密码表单，直接给这些按钮绑定独立的点击事件，触发第三方登录流程即可，完全绕过表单的验证逻辑，简单高效且无冲突。

修改后的完整代码示例：

const formSchema = z.object({
  username: z.string().min(3).max(50),
  password: z.string().min(8).max(16)
});

export default function Page() {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      username: '',
      password: '',
    }
  });

  // 账号密码登录的提交逻辑（保留Zod验证）
  const onCredentialSubmit = form.handleSubmit((values) => {
    console.log('凭证登录:', values);
    // 这里写账号密码登录的业务逻辑
  });

  // 谷歌登录独立处理函数
  const handleGoogleLogin = () => {
    console.log('触发谷歌登录');
    // 这里写谷歌OAuth登录的逻辑，比如调用谷歌登录SDK
  };

  // GitHub登录独立处理函数
  const handleGitHubLogin = () => {
    console.log('触发GitHub登录');
    // 这里写GitHub OAuth登录的逻辑，比如调用GitHub登录SDK
  };

  return (
    <Authbox title='Signin'>
      {/* 用户名输入框 */}
      <input {...form.register('username')} placeholder="用户名" />
      {form.formState.errors.username && <p>{form.formState.errors.username.message}</p>}
      
      {/* 密码输入框 */}
      <input {...form.register('password')} type="password" placeholder="密码" />
      {form.formState.errors.password && <p>{form.formState.errors.password.message}</p>}

      {/* 账号密码登录按钮（触发表单验证） */}
      <button type="submit" onClick={onCredentialSubmit}>账号密码登录</button>

      {/* 第三方登录按钮（独立逻辑，跳过验证） */}
      <button type="button" onClick={handleGoogleLogin}>谷歌登录</button>
      <button type="button" onClick={handleGitHubLogin}>GitHub登录</button>
    </Authbox>
  );
}

特殊场景：需要获取表单值但跳过验证 #

如果你的第三方登录需要用到表单内的某些值（比如用户预填的邮箱），可以用form.getValues()直接获取当前表单数据，无需触发验证：

const handleGoogleLogin = () => {
  const currentFormValues = form.getValues();
  console.log('当前表单数据:', currentFormValues);
  // 基于获取到的值执行谷歌登录逻辑
};

备选方案：动态切换表单验证规则 #

如果一定要让第三方登录走表单handleSubmit流程，可以通过状态动态切换resolver，提交后恢复验证。这种方式相对复杂，仅在特殊需求下使用：

import { useState } from 'react';

export default function Page() {
  const [enableValidation, setEnableValidation] = useState(true);
  
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: enableValidation ? zodResolver(formSchema) : undefined,
    defaultValues: {
      username: '',
      password: '',
    }
  });

  const onSubmit = form.handleSubmit((values) => {
    if (enableValidation) {
      // 账号密码登录逻辑
      console.log('凭证登录:', values);
    } else {
      // 第三方登录逻辑
      console.log('第三方登录:', values);
      setEnableValidation(true); // 恢复表单验证
    }
  });

  const handleGoogleLogin = () => {
    setEnableValidation(false);
    form.submit(); // 触发无验证的表单提交
  };

  // 其他代码...
}

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