폼 검증 — 클라이언트와 서버 양쪽에서 유효성 검사하기

<script>
  let form = $state({ email: '', password: '', name: '' });

  let errors = $derived.by(() => {
    const e = {};
    if (form.email && !form.email.includes('@')) e.email = '유효한 이메일을 입력하세요';
    if (form.password && form.password.length < 8) e.password = '8자 이상 입력하세요';
    if (form.name && form.name.length < 2) e.name = '2자 이상 입력하세요';
    return e;
  });

  let touched = $state({});
  let isValid = $derived(
    form.email && form.password && form.name &&
    Object.keys(errors).length === 0
  );

  function handleBlur(field) {
    touched[field] = true;
  }
</script>

<form onsubmit={(e) => { e.preventDefault(); console.log(form); }}>
  <div>
    <input bind:value={form.email} onblur={() => handleBlur('email')} placeholder="이메일" />
    {#if touched.email && errors.email}
      <p class="error">{errors.email}</p>
    {/if}
  </div>

  <div>
    <input type="password" bind:value={form.password} onblur={() => handleBlur('password')} placeholder="비밀번호" />
    {#if touched.password && errors.password}
      <p class="error">{errors.password}</p>
    {/if}
  </div>

  <button disabled={!isValid}>가입</button>
</form>

// src/lib/schemas.js
import { z } from 'zod';

export const registerSchema = z.object({
  email: z.string().email('유효한 이메일을 입력하세요'),
  password: z.string()
    .min(8, '8자 이상 입력하세요')
    .regex(/[A-Z]/, '대문자를 포함하세요')
    .regex(/[0-9]/, '숫자를 포함하세요'),
  name: z.string().min(2, '2자 이상 입력하세요').max(50),
  agreed: z.literal(true, { errorMap: () => ({ message: '약관에 동의해주세요' }) }),
});

// src/routes/register/+page.server.js
import { fail, redirect } from '@sveltejs/kit';
import { registerSchema } from '$lib/schemas';

export const actions = {
  default: async ({ request }) => {
    const formData = await request.formData();
    const data = Object.fromEntries(formData);
    data.agreed = formData.has('agreed');

    const result = registerSchema.safeParse(data);

    if (!result.success) {
      const fieldErrors = result.error.flatten().fieldErrors;
      return fail(400, { data, errors: fieldErrors });
    }

    await createUser(result.data);
    redirect(303, '/login');
  }
};

<!-- src/routes/register/+page.svelte -->
<script>
  import { enhance } from '$app/forms';
  let { form } = $props();
</script>

<form method="POST" use:enhance>
  <input name="email" value={form?.data?.email ?? ''} />
  {#if form?.errors?.email}
    <p class="error">{form.errors.email[0]}</p>
  {/if}

  <input type="password" name="password" />
  {#if form?.errors?.password}
    <p class="error">{form.errors.password[0]}</p>
  {/if}

  <input name="name" value={form?.data?.name ?? ''} />
  {#if form?.errors?.name}
    <p class="error">{form.errors.name[0]}</p>
  {/if}

  <label>
    <input type="checkbox" name="agreed" />
    약관 동의
  </label>
  {#if form?.errors?.agreed}
    <p class="error">{form.errors.agreed[0]}</p>
  {/if}

  <button>가입</button>
</form>

<script>
  import { enhance } from '$app/forms';
  import { registerSchema } from '$lib/schemas';

  let { form: serverForm } = $props();
  let formData = $state({ email: '', password: '', name: '' });
  let touched = $state({});

  // 클라이언트 실시간 검증
  let clientErrors = $derived.by(() => {
    const result = registerSchema.safeParse(formData);
    if (result.success) return {};
    return result.error.flatten().fieldErrors;
  });

  function showError(field) {
    return touched[field] && (clientErrors[field]?.[0] || serverForm?.errors?.[field]?.[0]);
  }
</script>

<form method="POST" use:enhance>
  <input
    name="email"
    bind:value={formData.email}
    onblur={() => touched.email = true}
  />
  {#if showError('email')}
    <p class="error">{showError('email')}</p>
  {/if}
  <!-- ... 나머지 필드 -->
</form>