[Vue3] vee-validate 간단한 사용법 (라이브러리로 유효성 검사하기)

input 태그에 정보를 적어서 넘길 때, 필수로 적어야하는 값을 아래처럼 텍스트로 표시를 해봤다.

 

입력할 때와 추가하기 버튼을 눌렀 때 활성화하려고 하는데 vee-validate 라이브러리를 사용했다.

(vue3, composition API, <script setup lang="ts"> 환경이다.)

 

https://vee-validate.logaretm.com/v4/

VeeValidate: Painless Vue.js forms

vue3 환경이기 때문에 v.4.x 버전으로 확인한다.

 

vee-validate 설치

npm install vee-validate --save

 

---

 

한글 번역이 제대로 안되어있기 때문에 여러 문서와 블로그 글을 보고난 후 적용해봤다.

또 input 태그 자체를 컴포넌트화해서 데이터를 전달하는 방식으로 해볼것이다.

이때 v-model을 사용할건데 관련 글은 아래에 있다.

https://hyjang.tistory.com/entry/Vue3-%EC%9E%90%EC%8B%9D%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-input-value%EA%B0%92-%EA%B0%80%EC%A0%B8%EC%98%A4%EA%B8%B0-defineModel

[Vue3] 자식컴포넌트 input value값 가져오기 (defineModel)

 

inputText.vue

<template> 
    <input
      class="input"
      v-model="modelValue"
      type="text"   
    />
    <p
      v-if="validateError" // 에러 메세지 존재 유무 조건문
      class="input--error"
    >
      {{ validateError }} //에러 메세지
    </p> 
</template>

<script lang="ts" setup>
  const props = defineProps<{     
    validateError?: string; // 부모로부터 받은 에러메세지
  }>();
  const modelValue = defineModel();
</script>

 

부모 컴포넌트

<template> 
    <InputText 
      v-model="title" 
      @blur="validateTitle" //검사 함수
      :validateError="titleError" //에러 메세지
    />
 </template>
 
 <script setup lang="ts">
  import { useField, useForm } from 'vee-validate';
  const { resetForm } = useForm();

/* 입력시 검사 함수 */
  const {
    value: title,
    errorMessage: titleError, //에러 메세지
    validate: validateTitle, //검사 함수
  } = useField('title', (value: string) => {
    if (!value) {
      return '제목은 필수입니다.';
    } else {
      const isEmpty = value.replace(/ /g, '');
      if (!isEmpty) {
        return '빈 문자열은 추가할 수 없습니다.';
      }
    }
    return true;
  });
  
  /* 추가하기 클릭 시 검사 함수*/
    const addTodo = async (): Promise<void | Component> => {
    if (!title.value ) {
      validateTitle();  // 검사 함수 실행하여 에러메세지 노출
      alert("제목 입력은 필수입니다.")
    } else {
      const isEmpty = title.value.replace(/ /g, '');
      if (!isEmpty) {
        validateTitle();  // 검사 함수 실행하여 에러메세지 노출
        alert("빈 문자열은 추가할 수 없습니다.")
        return;
      }
      try {
        const result = await axios.post<Todo>('http://localhost:3001/todoList', {
          title: title.value 
        }); 
        resetForm(); // 입력 폼 리셋 
		alert('성공적으로 추가되었습니다.');
      } catch (error) {
        console.error(error);
      }
    }
  };
</script>

 

따로 ref로 value값을 지정해주지 않아도 value: title을 통해 v-model과 연결할 수 있다.

 

errorMessage는 검사 함수에서 return할 문자열 메시지다. 이 메시지가 있냐 없냐 자체로 if문을 만들어 에러 메시지를 띄울 수 있다.

 

validate 함수는 useField를 이용해서 함수명을 정하면 @blur나 콜백함수 어디에서나 불러올 수 있다. (위에선 validateTitle로 지정해봤다.) 

 

const { resetForm } = useForm(); 을 이용하면 추가가 완료됐을때 일일이 title.value = '' 을 해줄 필요없이 한번에 리셋된다. 

특히 input창이 여러개라면 하나 하나 value 값을 ''로 비워줘야됐지만 resetForm() 을 사용하면 한번에 비워줄 수 있다.