vee-validate

input box에 validation을 적용하기 위해 외부 라이브러리 vee-validate를 사용했다.

여기에서 사용하는 버전은 2.2.15 버전이다

// package.json

"dependencies": {
    "vee-validate": "^2.2.15",
    "vue": "^2.6.11",
},

 

먼저 vee-validate를 설치한다.

npm install vee-validate --save

 

 

그 다음, 컴포넌트에 vee-validate를 불러온다.(나는 최상위 컴포넌트에 불러왔다.)

<script>
    import Vue from 'vue'
    import VeeValidate from 'vee-validate'
    Vue.use(VeeValidate)
</script>

 

그 후에 html에

<template>
    <div>
        <input 
    	    type="text"
            v-model="title"
            v-validate="'required'"
            name="title"/>
        <span>{{ errors.first('title') }}</span> <!-- inputbox의 name을 맵핑한다. -->
        <button @click="save">저장</button>
    </div>
</template>

validate 검사 후 저장 되도록 하기 위해 save 함수를 만든다.

<script>
    import Vue from 'vue'
    import VeeValidate from 'vee-validate'
    
    Vue.use(VeeValidate)
    
    export default {
    	data() {
            return {
                title: ''
            };
        },
        methods:{
            save(){
            	this.$validator.validateAll().then(success => {
                    if(success){
                    	....
                    }
                })
            }
        }
        ...
    }
</script>

만약 validate 규칙에 어긋나서 validateAll()의 결과가 success로 오지 않는다면, errors 객체가 만들어진다.

<span>{{ errors.first('title') }}</span>

이 활성화 될 것이다.

 

 

css까지 적용해서 이런식으로 만들어봤다.

<template>
    <div>
        <input 
            type="checkbox"
            v-model="tnf"
        />
        <input
            type="text"
            name="title"
            v-model="title"
            :disabled="!tnf"
            v-validate="rules"
            v-bind:class="{'has-error': errors.has('title')}"
        />
        <button @click="save">저장</button>
    </div>
</template>

<script>
    import Vue from 'vue'
    import VeeValidate from 'vee-validate'
    
    Vue.use(VeeValidate)
    
    export default {
        data() {
            return {
                title: '',
                tnf: false,
            };
        },
        methods: {
            save(){
            	this.$validator.validateAll().then(success => {
                    if(success){
                    	....
                    }
                })
            }
        },
        computed: {
            rules(){
                return this.tnf ? 'required' : ''
            }
        },
    }
</script>

<style scoped>
    .has-error {
        border: 1px solid red;
    }
</style>

validate를 무조건 요구하는게 아니고 checkbox가 활성화 되었을 때만 validate를 하기 위해 computed로 rules 함수를 받아와서 적용하는 방식이다.

 

그리고 validate 실패로 인해 errors.has('title')이 돌아오면(입력하지 않으면) 'has-error' 라는 class를 적용해서 css로 테두리를 빨간색으로 변경.

 

입력하면 변화 없음.