[Vue] VeeValidate 사용 가이드

VeeValidate는 Vue.js 애플리케이션에서 폼 유효성 검사를 쉽고 간편하게 수행할 수 있도록 도와주는 강력한 라이브러리입니다. Composition API와 결합하여 더욱 유연하고 재사용 가능한 폼 유효성 검사 로직을 구축할 수 있습니다.

설치하기

npm install vee-validate

 

기본 사용법

1. Vue 프로젝트에 추가하기

import { createApp } from 'vue';
import { Form, Field, ErrorMessage } from 'vee-validate';
import { required, email } from '@vee-validate/rules';

createApp({
  // ...
}).mount('#app');

2. 폼 구성하기

<template>
  <Form as="form">
    <Field name="email" type="email" :rules="{ required, email }" />
    <ErrorMessage name="email" class="error-message" />
  </Form>
</template>

• Form 컴포넌트: 전체 폼을 감싸고 유효성 검사 상태를 관리합니다.
• Field 컴포넌트: 각 입력 필드를 나타내며, name 속성으로 식별됩니다.
• ErrorMessage 컴포넌트: 유효성 검사 오류 메시지를 표시합니다.

3. 규칙 정의하기

• required: 필수 입력 항목
• email: 이메일 형식 검사
• 사용자 정의 규칙: @vee-validate/rules 패키지를 사용하여 다양한 규칙을 정의할 수 있습니다.

Composition API와 함께 사용하기

<script setup>
import { useForm } from 'vee-validate';
import { required, email } from '@vee-validate/rules';

const { handleSubmit, values, errors } = useForm({
  validationSchema: {
    email: required,
  },
});

const onSubmit = handleSubmit((values) => {
  console.log(values);
});
</script>

• useForm 훅: 폼 상태를 관리하고 유효성 검사를 수행합니다.
• validationSchema: 폼 전체에 대한 유효성 검사 규칙을 정의합니다.
• handleSubmit: 폼 제출 시 실행되는 함수입니다.

주요 기능

• 다양한 유효성 검사 규칙: 내장된 규칙 외에도 커스텀 규칙을 정의할 수 있습니다.
• 동적 유효성 검사: 폼 값이 변경될 때마다 실시간으로 유효성을 검사합니다.
• 에러 메시지 커스터마이징: 사용자 친화적인 에러 메시지를 제공할 수 있습니다.
• 조건부 유효성 검사: 특정 조건에 따라 유효성 검사 규칙을 변경할 수 있습니다.
• 비동기 유효성 검사: 서버에서 데이터를 가져와 유효성을 검사할 수 있습니다.

 

다양한 예시

1. 복잡한 유효성 검사 조건

• 비밀번호 강도 검사:

<script setup>
import { useForm } from 'vee-validate';
import { required, min, confirmed } from '@vee-validate/rules';

const { handleSubmit, values, errors } = useForm({
  validationSchema: {
    password: [
      required,
      min(8),
      confirmed: {
        target: 'confirmPassword',
        message: '비밀번호가 일치하지 않습니다.',
      },
    ],
    confirmPassword: required,
  },
});
</script>

• 특정 값과의 비교:

<script setup>
import { useForm } from 'vee-validate';

const { handleSubmit, values, errors } = useForm({
  validationSchema: {
    age: (value) => {
      if (value < 18) {
        return '만 18세 이상이어야 합니다.';
      }
      return true;
    },
  },
});
</script>

2. 동적 유효성 검사

• 선택된 옵션에 따른 유효성 검사:

<script setup>
import { ref, computed } from 'vue';
import { useForm } from 'vee-validate';
import { required, min } from '@vee-validate/rules';

const selectedOption = ref('option1');

const rules = computed(() => ({
  value: selectedOption.value === 'option1' ? [required, min(10)] : [],
}));

const { handleSubmit, values, errors } = useForm({
  validationSchema: rules,
});
</script>

3. 비동기 유효성 검사

• 중복 아이디 검사:

<script setup>
import { useForm } from 'vee-validate';

const { handleSubmit, values, errors } = useForm({
  validationSchema: {
    username: (value) => {
      return new Promise((resolve) => {
        // 서버에 아이디 중복 확인 요청
        fetch(`/api/users/${value}`)
          .then((response) => response.json())
          .then((data) => {
            if (data.exists) {
              resolve('이미 사용 중인 아이디입니다.');
            } else {
              resolve(true);
            }
          });
      });
    },
  },
});
</script>

4. 커스텀 유효성 검사 규칙

// customRules.js
import { createRule } from 'vee-validate';

export const isStrongPassword = createRule('isStrongPassword', (value) => {
  // 복잡한 비밀번호 검사 로직
  return true; // 또는 에러 메시지 반환
});

 

<script setup>
import { useForm } from 'vee-validate';
import { isStrongPassword } from './customRules';

const { handleSubmit, values, errors } = useForm({
  validationSchema: {
    password: isStrongPassword,
  },
});
</script>

5. 폼 상태 관리

• 폼 초기화:

const resetForm = () => {
  form.reset();
};

• 특정 필드 값 변경:

form.setField('email', 'newEmail@example.com');

6. 에러 메시지 커스터마이징

<ErrorMessage name="email" as="div" class="error-message">
  {{ errors.email }}
</ErrorMessage>

7. 컴포넌트 기반 유효성 검사

<template>
  <MyInput v-model="form.email" :rules="{ required, email }" />
</template>

<script setup>
import { useForm } from 'vee-validate';
import MyInput from './MyInput.vue';

const { handleSubmit, values, errors } = useForm({
  // ...
});
</script>

8. 파일 업로드 유효성 검사

• 파일 형식 및 크기 제한:

<script setup>
import { useForm } from 'vee-validate';
import { required, file, maxSize } from '@vee-validate/rules';

const { handleSubmit, values, errors } = useForm({
  validationSchema: {
    file: [
      required,
      file,
      maxSize: 2048, // 2MB
      (value) => {
        if (!value.type.match('image/*')) {
          return '이미지 파일만 업로드 가능합니다.';
        }
      },
    ],
  },
});
</script>

9. 날짜 범위 검사

• 시작 날짜가 종료 날짜보다 이전일 경우:

<script setup>
import { useForm } from 'vee-validate';

const { handleSubmit, values, errors } = useForm({
  validationSchema: {
    startDate: (value, { root }) => {
      if (root.endDate && new Date(value) > new Date(root.endDate)) {
        return '시작 날짜가 종료 날짜보다 이후일 수 없습니다.';
      }
    },
  },
});
</script>

10. 맞춤형 유효성 메시지 국제화

<script setup>
import { useForm, configure } from 'vee-validate';
import { required } from '@vee-validate/rules';

configure({
  locale: 'ko', // 한국어 설정
  messages: {
    ko: {
      required: '{_field_}은(는) 필수입니다.',
    },
  },
});

// ...
</script>

11. 동적 폼 생성 및 유효성 검사

<script setup>
import { ref } from 'vue';
import { useForm } from 'vee-validate';

const fields = ref(['name', 'email']);

const { handleSubmit, values, errors } = useForm({
  validationSchema: computed(() => {
    const schema = {};
    fields.value.forEach((field) => {
      schema[field] = required;
    });
    return schema;
  }),
});
</script>

 

VeeValidate를 활용한 회원가입 폼 유효성 검사

기본적인 회원가입 폼

<template>
  <Form as="form" @submit="onSubmit">
    <Field name="email" type="email" :rules="{ required, email }" />
    <ErrorMessage name="email" class="error-message" />

    <Field name="password" type="password" :rules="{ required, min: 8 }" />
    <ErrorMessage name="password" class="error-message" />

    <button type="submit">회원가입</button>
  </Form>
</template>

<script setup>
import { useForm } from 'vee-validate';
import { required, email, min } from '@vee-validate/rules';

const { handleSubmit } = useForm({
  validationSchema: {
    email: { required, email },
    password: { required, min: 8 },
  },
});

const onSubmit = handleSubmit((values) => {
  // 회원가입 로직
  console.log(values);
});
</script>

다양한 유효성 검사 조건 추가

• 비밀번호 확인:

  confirmed: { target: 'confirmPassword', message: '비밀번호가 일치하지 않습니다.' }

• 닉네임 중복 검사:

  (value) => {
    // 서버에 닉네임 중복 확인 요청
    return new Promise((resolve) => {
      // ...
    });
  }
  

• 특수 문자 포함 여부:

  (value) => {
    const regex = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/;
    return regex.test(value) || '비밀번호는 영문, 숫자, 특수문자를 포함해야 합니다.';
  }

• 휴대폰 번호 형식 검사:

  (value) => {
    const regex = /^\d{3}-\d{3}-\d{4}$/;
    return regex.test(value) || '잘못된 휴대폰 번호 형식입니다.';
  }

동적 유효성 검사

• 약관 동의:

  <Field name="agree" type="checkbox" :rules="{ required: '약관에 동의해주세요.' }" />

• 선택된 옵션에 따른 유효성 검사:

  <Field name="value" :rules="{ required: selectedOption.value === 'option1' }" />

사용자 정의 에러 메시지

<ErrorMessage name="email" class="error-message">
  {{ errors.email }}
</ErrorMessage>