React UseForm如何通过「保存为草稿」按钮忽略表单验证

完全不需要更换验证方案，React Hook Form本身就支持这种场景，最直接的实现方式是给两个按钮做不同的逻辑处理：

核心思路 #

• 「发送」按钮沿用默认的带验证提交逻辑，通过handleSubmit触发完整表单验证，验证通过后再提交。
• 「保存为草稿」按钮跳过验证，直接获取当前表单的所有值，自行处理草稿保存逻辑。

代码示例 #

import { useForm } from "react-hook-form";

function DraftableForm() {
  const { register, handleSubmit, getValues, formState: { errors } } = useForm({
    mode: "onSubmit" // 仅在提交时触发验证，匹配你的当前需求
  });

  // 正式提交（带验证）
  const handleSend = (formData) => {
    // 这里编写正式发送的业务逻辑，比如调用后端API提交表单
    console.log("正式提交数据:", formData);
  };

  // 保存草稿（跳过验证）
  const handleSaveDraft = () => {
    // 获取当前表单所有字段的值，不受验证状态影响
    const draftData = getValues();
    // 这里编写保存草稿的逻辑，比如存到localStorage或调用草稿专属API
    console.log("保存草稿数据:", draftData);
  };

  return (
    <form onSubmit={handleSubmit(handleSend)}>
      {/* 示例必填字段 */}
      <div className="form-group">
        <label>标题</label>
        <input 
          {...register("title", { required: "标题不能为空" })}
          placeholder="请输入标题"
        />
        {errors.title && <span className="error">{errors.title.message}</span>}
      </div>

      <div className="form-group">
        <label>内容</label>
        <textarea 
          {...register("content", { required: "内容不能为空" })}
          placeholder="请输入内容"
        />
        {errors.content && <span className="error">{errors.content.message}</span>}
      </div>

      {/* 保存草稿按钮：type="button"避免触发表单提交，绑定自定义点击事件 */}
      <button type="button" onClick={handleSaveDraft}>保存为草稿</button>
      {/* 发送按钮：type="submit"触发表单的带验证提交 */}
      <button type="submit">发送</button>
    </form>
  );
}

关键细节说明 #

• 「保存为草稿」按钮必须设置为type="button"，否则会默认触发表单的submit事件，进而触发验证逻辑。
• getValues()方法可以获取当前表单的所有字段值，哪怕字段未通过验证，完全满足草稿保存的需求。
• 如果后续需要给草稿保存添加部分验证（比如某些核心字段必须填写），可以用trigger(["field1", "field2"])单独验证指定字段，再决定是否执行保存操作。

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