ALBERT SITE

1️⃣ 핵심 구조 개요 (중요)

실무에서 가장 많이 쓰이는 구조는 이 4가지 분리입니다.

form        : 입력값
rules       : 검증 규칙
errors      : 에러 메시지
validate()  : 검증 로직

2️⃣ Vue 3 입력폼 밸리데이션 샘플 (권장 구조)

FormValidation.vue

<template>
  <form @submit.prevent="handleSubmit">

    <!-- 이메일 -->
    <div>
      <label>Email</label>
      <input
        v-model="form.email"
        @blur="validateField('email')"
        type="text"
      />
      <p v-if="errors.email" class="error">{{ errors.email }}</p>
    </div>

    <!-- 비밀번호 -->
    <div>
      <label>Password</label>
      <input
        v-model="form.password"
        @blur="validateField('password')"
        type="password"
      />
      <p v-if="errors.password" class="error">{{ errors.password }}</p>
    </div>

    <!-- 비밀번호 확인 -->
    <div>
      <label>Password Confirm</label>
      <input
        v-model="form.passwordConfirm"
        @blur="validateField('passwordConfirm')"
        type="password"
      />
      <p v-if="errors.passwordConfirm" class="error">
        {{ errors.passwordConfirm }}
      </p>
    </div>

    <button type="submit">Submit</button>
  </form>
</template>

<script setup>
import { reactive } from 'vue'

/* 1️⃣ 입력값 */
const form = reactive({
  email: '',
  password: '',
  passwordConfirm: '',
})

/* 2️⃣ 에러 메시지 */
const errors = reactive({
  email: '',
  password: '',
  passwordConfirm: '',
})

/* 3️⃣ 정규식 / 규칙 */
const rules = {
  email: [
    value => !!value || '이메일은 필수입니다.',
    value =>
      /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value) ||
      '이메일 형식이 올바르지 않습니다.',
  ],
  password: [
    value => !!value || '비밀번호는 필수입니다.',
    value =>
      value.length >= 8 || '비밀번호는 8자 이상이어야 합니다.',
  ],
  passwordConfirm: [
    value => !!value || '비밀번호 확인은 필수입니다.',
    value =>
      value === form.password || '비밀번호가 일치하지 않습니다.',
  ],
}

/* 4️⃣ 단일 필드 검증 */
function validateField(field) {
  errors[field] = ''

  for (const rule of rules[field]) {
    const result = rule(form[field])
    if (result !== true) {
      errors[field] = result
      return false
    }
  }
  return true
}

/* 5️⃣ 전체 폼 검증 */
function validateForm() {
  let isValid = true

  for (const field in rules) {
    if (!validateField(field)) {
      isValid = false
    }
  }

  return isValid
}

/* 6️⃣ 제출 처리 */
function handleSubmit() {
  if (!validateForm()) return

  console.log('✅ 검증 통과', form)
  alert('폼 제출 성공')
}
</script>

<style scoped>
.error {
  color: red;
  font-size: 12px;
}
</style>

3️⃣ 이 구조가 실무에서 많이 쓰이는 이유

✅ 장점

항목이유확장성필드/규칙 추가가 매우 쉬움가독성rules / errors 분리재사용validateField, validateForm 공통 사용UXblur 시 검증 + submit 시 전체 검증라이브러리 불필요작은 프로젝트에 최적

4️⃣ 실무에서 자주 추가하는 패턴 (선택)

입력 시 즉시 검증 (watch)

import { watch } from 'vue'

watch(() => form.email, () => {
  validateField('email')
})

에러 초기화

function resetErrors() {
  Object.keys(errors).forEach(key => {
    errors[key] = ''
  })
}