[VUE]vee-validate 사용방법

안녕하세요 
오늘은 vee-validate를 사용하는 사용 예제를 포스팅을 합니다. 

Vee-Validate 버전 확인 및 install 

validate 버전은 3.4.14입니다. 
main.js 에 다음과 같이 import를 해주세요. 

import { ValidationProvider, ValidationObserver, extend } from "vee-validate";
import { required } from "vee-validate/dist/rules";


//중간생략

// Vee-Validate Component Install
Vue.component('ValidationProvider', ValidationProvider);
Vue.component('ValidationObserver', ValidationObserver);

// Vee-Validate Rules Customizing
for(let rule in veeValidateRules) {
  extend(rule, veeValidateRules[rule]);
}
extend('required', {
  ...required,
  message: '필수입력값을 입력해주세요'
});

저는 위와같이 component를 사용한다고 사용하고 rule도 위와같이 custom으로 선언해서 사용할 수 있답니다.

Validation-provider 의 사용 방법

import alpha from './types/rules/alpha';
import alpha_dash from './types/rules/alpha_dash';
import alpha_num from './types/rules/alpha_num';
import alpha_spaces from './types/rules/alpha_spaces';
import between from './types/rules/between';
import confirmed from './types/rules/confirmed';
import digits from './types/rules/digits';
import dimensions from './types/rules/dimensions';
import email from './types/rules/email';
import excluded from './types/rules/excluded';
import ext from './types/rules/ext';
import image from './types/rules/image';
import oneOf from './types/rules/oneOf';
import integer from './types/rules/integer';
import is from './types/rules/is';
import is_not from './types/rules/is_not';
import length from './types/rules/length';
import max from './types/rules/max';
import max_value from './types/rules/max_value';
import mimes from './types/rules/mimes';
import min from './types/rules/min';
import min_value from './types/rules/min_value';
import numeric from './types/rules/numeric';
import regex from './types/rules/regex';
import required from './types/rules/required';
import required_if from './types/rules/required_if';
import size from './types/rules/size';
import double from './types/rules/double';
export { alpha_dash, alpha_num, alpha_spaces, alpha, between, confirmed, digits, dimensions, email, ext, image, oneOf, integer, length, is_not, is, max, max_value, mimes, min, min_value, excluded, numeric, regex, required, required_if, size, double };

위의 것들이 기본적으로 제공을 하는 것입니다.

<validation-provider
                        rules="alpha_num|required"
                        v-slot="{ errors }"
                      >
                        <input type="text" class="tf_g tf_email" name="아이디" v-model="memberId" required>
                        <span>{{ errors[0] }}</span>
                      </validation-provider>

아래와 같이 provider를 통해서 html 개체의 input를 validate를 걸어서 사용을 하실수 있습니다. 
위의 예제를 보시면 알 수 있으시지만 사용자 아이디에 영문과 숫자 그리고 필수값이라는 것을 rule로 정의해서 걸어두었답니다.

각 개체들의 validate를 사용해서는 validation provider를 사용하면 되지만 전체 form의 slot의 state를 검증할때는 
validation observer 를 사용하시면 됩니다.

<validation-observer v-slot="{ handleSubmit }">
              <form id="login_frm"  ref="form" @submit.prevent="handleSubmit(checkForm)">
                <fieldset class="fld_login">
                  <div id="loginEmailField">
                    <!-- weblogin.email_or_phone_label -->
                    <div class="item_tf item_inp" style="">
                      <label for="id_email_2" class="lab_txt screen_out" id="id_email_2_label">
                      </label>
                      <validation-provider
                        rules="alpha_num|required"
                        v-slot="{ errors }"
                      >
                        <input type="text" class="tf_g tf_email" name="아이디" v-model="memberId" required>
                        <span>{{ errors[0] }}</span>
                      </validation-provider>
                    </div>
                  </div>
                  <div class="item_tf item_inp" style="">
                    <label for="id_password_3" class="lab_txt screen_out" id="id_password_3_label">
                      <span aria-hidden="true">비밀번호</span>
                      <span class="screen_out">비밀번호</span>
                    </label>
                    <validation-provider
                        rules="required"
                        v-slot="{ errors }"
                    >
                    <input data-type="password" class="tf_g " name="memberPwd" type="password"    v-model="memberPwd"   required>
                      <span>{{ errors[0] }}</span>
                    </validation-provider>
                  </div>
                  <div class="wrap_btn">
                    <button class="btn_g btn_confirm submit" type="submit" aria-disabled="false">로그인</button>
                  </div>
                </fieldset>
              </form>
              </validation-observer>

위와 같이 사용하시면  submit을 하고 나서 button 을 비활성화 시키거나 할 수도 있습니다. 

이것을 쓰면서 좋은 것은 사용자의 오류 메세지를 custom으로 rule을 정리할 수 있습니다.

사용방법에 대한 좋은 url은 아래와 같습니다.

https://rafaelogic.medium.com/creating-a-custom-rule-in-vue-vee-validate-83777b9a5126

Creating a custom rule in Vue-Vee-Validate

반응형