Vue3 Validation 플러그인 적용하기(VeeValidate + yup + i18n)_1

Vue3에서 검색이나 입력에 대한 검증을 하나씩 하기보다는 공통적으로 적용되는 부분이 있었으면해서 찾아보았다.

 

VeeValidate, Yup, Zod등이 있다.

VeeValidate에서 자체적으로 Yup, Zod 등의 라이브러리와 함께 사용하는 기능등을 제공하기도 한다.

설치

npm install vee-validate

설치 후 별다른 후속절차없이 바로 사용 할 컴포넌트에서 사용하면 된다.

Yup과 함께 사용 하려고 하기 때문에 Yup또한 설치한다.

npm install yup

 

선제조건이 존재한다.

1. Form 으로 감싸져있어야 한다.

현재 확인중인 사용방법은 다음과 같음

일단 사용한다고 명시를 한다. 여기선 searchText로 연결된 대상을 validation할것임.

//validation
import { useForm } from 'vee-validate';
import * as yup from 'yup';
const { handleSubmit } = useForm({
    validationSchema: yup.object({
        searchText: yup.string().required().min(2), //임시조건
    }),
});

그리고 submit시 실행될 함수를 override 시킨다.

위에서 정의한 조건 string타입이면서 required면서 최소2글자 여야지만 밑에 submit이 실행된다.

/**
 * 조회
 * @returns {Promise<void>}
 */
const handleSearch = handleSubmit(async (values) => {
    // validation 조건에 부합하지 않는경우 실행 안됨.
    common.toast.successToast('조회됨!');
    let rolesArray = Object.keys(userRole.value).map((key) => userRole.value[key]);
    let params = { useYn: userUseYn.value, userRole: rolesArray };
    const { data } = await fetchUserList(params).catch((error) => {
        console.log(error);
    });
    setUserList(data.data);
});

 

 

실제로 사용되는 컴포넌트

CommonSearchBox.vue

<template>
    <div class="d-flex align-items-center" :style="customStyle" :class="customClass">
        <div class="p-inputgroup">
            <span v-if="label !== ''" class="p-inputgroup-addon">{{ label }}</span>
            <div class="p-input-icon-right p_notify">
                <i class="pi pi-search" />
                <InputText
                    type="text"
                    v-model="value"
                    :placeholder="placeholder"
                    :style="inputStyle"
                    @keyup.enter="handleEnter"
                ></InputText>
                <div class="notify show" v-if="errors.length">
                    <div v-for="error in errors">{{ error }}</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
/**
 * label = 설명 라벨
 * custom-style = style로 영역 조절
 * custom-class = class추가로 영역 조절
 * input-style = input-text width or style 지정.
 * placeholder =  검색창에 입력 없을 때 보여 지는 값
 */
let props = defineProps({
    label: { Type: String, default: '' },
    customStyle: { Type: String },
    customClass: { Type: String },
    inputStyle: { Type: Object, default: { width: '200px' } },
    placeholder: { Type: String, default: 'Search' },
    name: { Type: String },
    type: { Type: String, default: 'text' },
    modelValue: { Type: String },
});
let emits = defineEmits(['enter']);
function handleEnter() {
    emits('enter');
}
import { useField } from 'vee-validate';

//기본설정 rules, v-model 연동 true
const { value, errors } = useField(() => props.name, undefined, { syncVModel: true });
</script>

<style></style>

 

여기서 props로 받은 name값으로 path를 연결한다. 여기선 searchText

//기본설정 rules, v-model 연동 true
const { value, errors } = useField(() => props.name, undefined, { syncVModel: true });

결국 validationSchema에 연결된 role를 바라보고 동일한 필드의 값으로 검증하는 것 같다.

기타 확인중인 예시 스키마

import { useForm } from 'vee-validate';
import * as yup from 'yup';
const { handleSubmit } = useForm({
    validationSchema: yup.object({
        searchInfo: yup.string().required().min(2), //임시조건
        searchInfo2: yup
            .string()
            .test((data) => {
                console.log('data확인중');
                console.log(data);
                if (data.length > 2) {
                    return false;
                }
                return true;
            })
            .label('검색조건'), //임시조건
    }),
});

 

그런데 위와 같이 적용하는 경우에는 기본 언어셋을 따라가는데 여러가지 언어를 선택 할 수 있고
그 언어에 따라서 영어면 영어로 검증실패시 알림글이 나오고..!
한글이면 한글로 나오는 형태로 적용하고 싶었다.

 

다국어를 사용 할 때 많이 사용하는 i18n 플러그인을 써야할듯하다.

vee-validate에서 설명하는 부분

Localization (i18n)

Localization (i18n)

간단하게 설정하는 locale

 

사이트주소 VeeValidate 관련

VeeValidate: Painless Vue.js forms

VeeValidate: Painless Vue.js forms

Yup 관련

Yup 라이브러리 파헤치기

Yup 라이브러리 파헤치기