유효성 검증을 위한 vee-validate 플러그인

 

 

설치 version 3.4.10

npm install vee-validate

// main.js
import veeValidate from 'vee-validate';

new Vue({
    veeValidate
}).$mount('#app');

 

적용

// in component
import {ValidationObserver, ValidationProvider, extend} from 'vee-validate';
import * as rules from 'vee-validate/dist/rules';
import {messages} from 'vee-validate/dist/locale/ko.json';
import {configure} from 'vee-validate';

// configure 통해 각 상황에 맞는 클래스를 설정할 수 있다.
configure({
  classes: {
    valid: 'is-valid',
    invalid: 'is-invalid',
    dirty: ['is-dirty', 'is-dirty'],
  },
});

// 기본 룰을 불러와서 extend 시킨다.
Object.keys(rules).forEach(rule => {
  extend(rule, {
    ...rules[rule], // copies rule configuration
    message: messages[rule], // assign message
  });
});

export default {
    components: {
        ValidationObserver: ValidationObserver,
        ValidationProvider: ValidationProvider,
    }
    methods: {
        submit() {
            this.$refs.form.validate().then(result => {
            })
        }
    }
}

<validation-observer ref="form" v-slot="{invalid, validated, handleSubmit, validate}">
    <validation-provider name="name" mode="passive" rules="required" v-slot="{errors, valid, classes}">
        <input type="text" :class="classes" v-model="name">         
  </validation-provider>
</validation-observer>

<button type="button" @click="submit">submit</button>

여기서 mode = passive 는 입력버튼을 누른 후 validation이 진행되는 것을 뜻한다. 인터렉티브

현재 코드만 보면 나는 에러코드는 나오지 않고, 클래스로 제어하는 것으로 볼 수 있다.

 

 

템플릿 코드 제일 위에 validation-observer가 있는데 이는 provider를 전체적으로 총괄하는 것을 뜻한다.

하나하나 즉각적인 반응을 원하면, provider만 써도 무방하다.

 

 

보통은 입력 또는 전송 버튼을 통해서 한번에 처리를 하는 ui를 많이 작업함으로 필수적으로 쓰이지 않을까 싶다.

vee-validate는 다양한 기본 rules 를 제공하는데 이는 해당 페이지를 통해 확인 가능하다. 룰

 

 

다양한 예시들 (examples)

https://codesandbox.io/examples/package/vee-validate

vee-validate examples - CodeSandbox

 

 

 

 

 

 

*좋아요과 댓글은 힘이 됩니다.