vee-validate

Vue에서 vee-validate 외부 라이브러리를 사용하여 입력받은 값을 검증할 수 있다.

 

먼저 vee-validate를 설치한다.

 

npm install vee-validate --save

그리고 main.js 에 import 하고 등록해준다.

// main.js

import Vue from 'vue';
import VeeValidate from 'vee-validate';
Vue.use(VeeValidate);

그리고 사용하고자 하는 input 태그에 v-validate로 검증 rule을 설정한다.

<input
            v-model.trim="searchText"
            v-validate="'required|min:2'"
            name="searchText"
            placeholder="검색어를 입력해주세요."
            type="text"
          >
 <button @click="test">테스트</button>

위의 경우는 필수 입력과 최소 2글자 이상을 입력받는 rule을 설정하였다.

 

테스트 라는 버튼을 만들어 검증이 제대로 되는지 확인하는 메서드를 실행해본다.

 

메서드에 다음과 같이 test 메서드를 생성한다.

 methods : {
    test() {
      this.$validator.validateAll().then(success => {
        if(success) {
          alert("검증 성공");
        } else {
          alert("검증에 실패했습니다.");
          console.log("Error 발생? " + this.errors.has('searchText')); // 에러가 있으면 true 반환
          console.log(this.errors.first('searchText')); // 에러메세지 반환
        }
      })
    }
 }

test 메서드가 실행되면 this.$validator.validateAll() 로 검증을 하여 검증 결과를 받게된다.

검증에 성공하면 success 는 true가 되어 "검증 성공" 이라는 알람창이 뜨고

검증에 실패하면 "검증에 실패했습니다" 라는 알람창이 뜬다.

 

this.errors.has('필드명') 으로 에러가 있는지 확인할 수 있으며

this.errors.first('필드명') 으로 에러 메세지를 가져올 수 있다.

 

아무것도 입력하지 않았을 때,

1글자만 입력했을 때 나오는 에러메세지를 콘솔에 띄워보았다.

 

설정에 searchText에 대한 형식을 '검색어' 로 지정해놓았기 때문에 '검색어'라는 단어가 자동으로 출력된다.

(형식 설정 방법은 추후에 업로드 예정)

 

또는 지정된 형식으로 span 태그를 나타내서 화면에 오류메세지를 출력할 수도 있다.

(이 부분도 더 공부하여 추후에 업로드 할 예정)

 

---

제가 직접 validate 라이브러리를 세팅하고 사용한 것이 아닌, 이미 세팅된 기능을 사용하면서 적은 내용이라 많이 부정확할 수 있습니다. 조만간 다시 정리하겠습니다.