🐅 vee-validate 적용

🎍vee-validate?

vee-validate는 vue에서 validation을 편하게 도와주는 라이브러리이다. 이번 프로젝트에 적용시켜보았다. 그 전에는 script에 굉장히 if~else가 많아서 유지보수에 굉장한 어려움이 있었다. 그리하여 간단한 validation을 소개시켜 주고자 한다.

 

👌vee-validate 세팅

https://github.com/eorjs37/vue3_vee_validate  은 여기서 세팅하는 것을 확인 할 수 있다.

 

🏣 Form으로 validation 체크 하기

구조는 아래와 같다.

크게 "Form" 컴퍼넌트으로 감싸고 "Form" 안에  "Field" 컴퍼넌트를 넣는다.

Form

위 구조를 코드로 작성하면 아래와 같다.(참고로 css는 작업을 편하기 하기 위해 boostrap를 적용하였다.) 

아래코드에서는  Field가 하나뿐이지만 너무 많이 넣으면 보기 힘들어 현재는 한개만 넣었다.

<template>
	<div class="container mt-3">
    	//Form 태그
        <Form @submit="form.onSubmit" ref="addForm">
        	<b-row>
            	<b-col lg="6" sm="12">
                	<Field v-model="form.name" id="name" name="name" label="이름" rules="required" v-slot="{ field, errors }">
                         <b-form-group id="name" label="이름" label-for="name">
                          <b-form-input id="name" v-bind="field" type="text" placeholder="이름을 입력하세요." :state="errors[0] ? false : null"> </b-form-input>

                          <b-form-invalid-feedback v-if="errors[0]" id="input-live-feedback"> {{ errors[0] }} </b-form-invalid-feedback>
                        </b-form-group>
                      </Field>
                </b-col>
            </b-row>
        </Form>
    <div>
</template>
<script>
import { reactive, ref } from 'vue';
export default {
	setup() {
        //Form 참조하기 위해 선언
    	const addForm = ref(null);
        
        const form = reactive({
        	name: '', 
            
            onSubmit: async () => {
            //validate가 promise으로 동작하기 때문에 async/await를 사용하였다.
            const { validate } = addForm.value;

            const { valid } = await validate();
                if (!valid) {
                  alert('필수값을 확인해주세요.');
                }
          	},
        })
        
         return {
          addForm,
          form,
        };
    }
}

 

 

👌 vee-validate rules 적용

vee-validate에는 많은 rule이 있다. 여기서 적용한건 "required(필수값), email(이메일 양식 확인), comfirmed(비밀번호 확인)" 적용하였다.

vee-validate rules : vee-validate다양한 rules 확인  

 

1. required 적용

 

<Field v-model="form.name" id="name" name="name" label="이름" rules="required" v-slot="{ field, errors }">
    <b-form-group id="name" label="이름" label-for="name">
      <b-form-input id="name" v-bind="field" type="text" placeholder="이름을 입력하세요." :state="errors[0] ? false : null"> </b-form-input>

      <b-form-invalid-feedback v-if="errors[0]" id="input-live-feedback"> {{ errors[0] }} </b-form-invalid-feedback>
    </b-form-group>
  </Field>

 

 

rules="required" 를 통해 필수값을 체크 한 다음 label="이름" 를 통해 항목의 에러메시지를 보여준다. validate를 했을때는 아래와 같다. 

그리고 errors를 통해 메세지를 보여준다 

required 적용

 

2. email 적용

<b-col lg="6" sm="12">
          <Field v-model="form.email" id="email" name="email" label="이메일" rules="required|email" v-slot="{ field, errors }">
            <b-form-group id="email" label="Email address" label-for="email">
              <b-form-input
                id="email"
                v-bind="field"
                type="email"
                placeholder="Enter email"
                :state="errors[0] ? false : null"
                required></b-form-input>

              <b-form-invalid-feedback v-if="errors[0]" id="input-live-feedback"> {{ errors[0] }} </b-form-invalid-feedback>
            </b-form-group>
          </Field>
</b-col>

여기서는 rules="required|email" 를 사용하였다. 이렇게 하면 필수값이면서 이메일을 체크하겠다는 뜻이다.

email

 

 

3. confirmed

confirmed는 비밀번호 확인값을 확인하기 위해 사용된다. 사용방법 코드는 아래와 같다

      <b-row>
        <b-col lg="6" sm="12">
          <Field v-model="form.password" id="password" name="password" label="비밀번호" rules="required" v-slot="{ field, errors }">
            <b-form-group id="password" label="비밀번호" label-for="password">
              <b-form-input
                id="password"
                type="password"
                placeholder="Enter password"
                :state="errors[0] ? false : null"
                v-bind="field"></b-form-input>
              <b-form-invalid-feedback v-if="errors[0]" id="input-live-feedback"> {{ errors[0] }} </b-form-invalid-feedback>
            </b-form-group>
          </Field>
        </b-col>

        <b-col lg="6" sm="12">
          <Field
            v-model="form.passwordConfirm"
            id="passwordConfirm"
            name="passwordConfirm"
            label="비밀번호"
            rules="required|confirmed:@password"
            v-slot="{ field, errors }">
            <b-form-group id="passwordConfirm" label="비밀번호" label-for="passwordConfirm">
              <b-form-input
                id="passwordConfirm"
                type="password"
                placeholder="Enter passwordConfirm"
                v-bind="field"
                :state="errors[0] ? false : null"></b-form-input>
              <b-form-invalid-feedback v-if="errors[0]" id="input-live-feedback"> {{ errors[0] }} </b-form-invalid-feedback>
            </b-form-group>
          </Field>
        </b-col>
      </b-row>

여기서 rules="required|confirmed:@password" 의 뜻은 "필수값 AND name:password의 값을 일지하는지 확인함" 이라는 뜻이다.

비밀번호 확인

 

 

🦎 후기

이번 프로젝트에 적용한 결과 유지보수 관점에서 보면 if~else를 반복하는 것 보다는 훨씬 관리하기가 쉬워졌다. 실제 실무에서는 이것보다는 훨씬 복잡하며, 다양한 상황에 대한 경험이 필요해 보인다.