SvelteKit SuperForms提交前清空输入，无法传数据至+page.server.ts

以下是针对该问题的排查和修复步骤：

• 核对表单输入框的name属性
  确保邮箱、密码输入框的name属性和Zod schema定义的字段名完全一致。比如你的schema是z.object({ email: z.string().email(), password: z.string().min(8) })，输入框必须写成<input type="email" name="email" bind:value={form.data.email}>——少了name或者名字不匹配的话，服务端接收不到数据，但客户端因为绑定了form.data，调试视图还能正常显示内容。

• 排查客户端是否有手动清空表单的代码
  检查组件里有没有在提交前执行form.reset()，或者手动把form.data.email、form.data.password设为空的逻辑。不少人会误在onSubmit回调里加重置代码，导致提交前数据被提前清空。

• 修正服务端动作的处理逻辑
  在+page.server.ts里，必须通过superValidate来处理请求数据，不能直接读取request.formData()后自行解析。正确的写法示例：

  import { superValidate } from 'sveltekit-superforms/server';
  import { z } from 'zod';
  
  const registerSchema = z.object({
    email: z.string().email('请输入有效的邮箱地址'),
    password: z.string().min(8, '密码长度不能少于8位')
  });
  
  export const actions = {
    default: async ({ request }) => {
      const form = await superValidate(request, registerSchema);
      // 先打印form.data确认是否拿到数据
      console.log('服务端接收的表单数据:', form.data);
      
      if (!form.valid) {
        return { form };
      }
  
      // 这里写注册逻辑，比如存入数据库等
    }
  };
  

  如果跳过superValidate直接处理formData，很容易因为格式不匹配导致拿不到正确数据。

• 检查use:enhance的使用是否正确
  如果表单用了use:enhance自定义提交逻辑，别在回调里错误修改或清空form.data，也不要返回{ reset: true }（除非是提交成功后再重置）。如果不需要自定义逻辑，直接在<form>标签上添加use:enhance即可：<form method="POST" use:enhance>。

• 确认表单的method属性
  表单必须设置method="POST"，和服务端动作的处理方式对应。如果用了GET方法，数据会通过URL传递，superValidate默认处理POST请求的表单数据，会导致服务端拿不到内容。

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