민아의 기록일지

1. main.js 에 넣어 기본적인 유효성 검사 실행해보기

먼저, vue 버전에 맞는 vee-validate를 다운로드해준다. 

나는 vue 2 에서 구현할 것이기때문에, 

※ vee validate를 다운로드 했는데, vee-validate 가 작동하지 않는다면, 버전이 잘못된것이다. 그래서 본인 vue에 맞는 vee-validate를 다운로드 해야한다. 

npm install vee-validate@"<3.0.0" --save

로 다운로드 해준다. 

main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import VeeValidate from "vee-validate";

Vue.use(VeeValidate);
Vue.prototype.$axios = axios;
Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

이렇게 vee-validate를 추가해준다. 그러면, 모든 component 에서 사용이 가능해진다.

MemberRegisterView.vue

<template>
  <b-container fluid>
    <h1>Sign Up</h1>
    <b-form>
		<b-form-group
        label="Email"
        label-for="email">
        <b-form-input
          type="email"
          id="email"
          placeholder="Enter email address"
          v-model="user.email"
          v-validate="'required|email'"
          name="email" />
        <span class="warningText">{{ errors.first('email') }}</span>
      </b-form-group>
      <b-button
        variant="primary"
        @click="handleRegister">
        Sign Up
      </b-button>
    </b-form>
  </b-container>
</template>

<style scoped>
h1 {
  margin-bottom: 1.5rem;
}
.warningText {
  color: crimson;
}
</style>

이렇게 input 박스에 v-validate="'required|email'" 을 넣어주고, name값에 email 유효성을 봐주고 만약, 그 email 유효성에 어긋난다면, 이메일 주소를 맞게 입력해달라는 메시지를 <span> 태그에 넣어줄 것이다. 

나는 span 에 class값을 주어서 빨간색으로 보이게 설정해뒀다. 그런데, 영어로 되어있으니, 한글로 바꿔보자!

vee-validate에 설정되어잇는 error message를 customize할 수 있는데, 유효성에 대한 데이터만 따로 빼고 싶어서, utils라는 폴더를 생성해 veevalidateUtils.js 파일을 따로 빼두어 main.js 에 추가해줬다.

main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import VeeValidate from "vee-validate";
import '@/utils/veevalidateUtils'

Vue.use(VeeValidate);
Vue.prototype.$axios = axios;
Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

여기서, 아까 말한 이메일 형식에 어긋났을때의 메시지를 수정해 줄 것이다.

veevalidateUtils.js

import {Validator} from 'vee-validate';
import {email} from 'vee-validate/dist/rules.esm' // 기본적으로 제공되는 규칙을 모아둔 파일

// 존재하는 rule의 메세지를 바꾸기위해
Validator.extend('email', {
    ...email,
    getMessage: '이메일 형식이 아닙니다.',
})
// 새로운 rule 추가

존재하는 email 이라는 rule 의 메시지를 변경할 것인데, 여기서 ...email 은 email이라는 객체의 값을 각각 새로운 객체에 복제하는 코드이다. 참고 : https://joshua1988.github.io/es6-online-book/spread-operator.html

해주면, 

에러 메시지가 바뀐 것을 확인 할 수 있다.

2. 유효성검사에 어긋나면 다음으로 넘어가지않게 설정

참고: https://vee-validate.logaretm.com/v2/guide/components/validation-observer.html#scoped-slot-data

https://vee-validate.logaretm.com/v2/guide/events.html#disabling-events-validation

$validator 를 이용하자

veevalidateUtils.js

import {Validator} from 'vee-validate';
import {required, email} from 'vee-validate/dist/rules.esm' // 기본적으로 제공되는 규칙을 모아둔 파일

// 존재하는 rule의 메세지를 바꾸기위해
Validator.extend('required', {
    ...required,
    getMessage: '필수 입력 사항입니다.',
})
Validator.extend('email', {
    ...email,
    getMessage: '이메일 형식이 아닙니다.',
})
// 새로운 rule 추가
// 이름
const NAME_MIN = 2
const NAME_MAX = 16
const NAME_REGEX = new RegExp("^[가-힣a-zA-Z]{"+ NAME_MIN + "," + NAME_MAX +"}$")

Validator.extend('name', {
    validate(value){
        return NAME_REGEX.test(value)
    },
    getMessage: `이름은 한글과 영문 대 소문자를 사용하게요. (특수기호, 공백 사용 불가, ${NAME_MIN} ~${NAME_MAX}자)`,
})
// 비밀번호
const PW_MIN = 8
const PW_MAX = 16
const PW_REGEX = new RegExp("^(?=.*?[a-zA-Z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{" + PW_MIN + "," + PW_MAX + "}$")
Validator.extend('pw', {
    validate(value){
        return PW_REGEX.test(value);
    },
    getMessage: `비밀번호는 ${PW_MIN}~${PW_MAX}자 영문 대 소문자, 숫자, 특수문자 조합을 사용하세요.`
})

MemberRegisterView.vue

<template>
  <b-container fluid>
    <h1>Sign Up</h1>
    <b-form>
      <b-form-group
        label="Name"
        label-for="username">
        <b-form-input
          type="text"
          id="username"
          placeholder="Enter name"
          v-model="user.userName"
          v-validate="'required|name'"
          name="name" />
          <span class="warningText">{{ errors.first('name') }}</span>
      </b-form-group>

      <b-form-group
        label="Email"
        label-for="email">
        <b-form-input
          type="email"
          id="email"
          placeholder="Enter email address"
          v-model="user.email"
          v-validate="'required|email'"
          name="email" />
        <span class="warningText">{{ errors.first('email') }}</span>
      </b-form-group>
      <b-form-group
        label="Password"
        label-for="password">
        <b-form-input
          type="password"
          id="password"
          placeholder="Enter password"
          v-model="user.password"
          v-validate="'required|pw'"
          name="pw" />
          <span class="warningText">{{ errors.first('pw') }}</span>
      </b-form-group>
      <b-button
        variant="primary"
        @click.prevent="handleRegister">
        Sign Up
      </b-button>
    </b-form>
  </b-container>
</template>

<script>

export default {
  name: "MemberRegisterView",
  data() {
    return {
      user: {},
      submitted: false,
      successful: false,
      message: "",
    };
  },
  methods: {
   async handleRegister() {
      const validForm = await this.$validator.validateAll();
      console.log(this.$validator)
      console.log(validForm)
      if(!validForm) return alert('내용을 한번 더 확인해주세요')
      else{
        this.$store.dispatch("loginModule/signUp", this.user)

      }
    },
  },
};
</script>

<style scoped>
h1 {
  margin-bottom: 1.5rem;
}
.warningText {
  color: crimson;
}
</style>

script 부분에,

this.$validator 를 콘솔에 찍을걸 확인해보면,

이런식으로, ErrorBag 이라는 객체가 들어있는데 그 객체는 길이가 3인 Array 로 되어있다.

이런식으로 validate 가 false 이면, alert창이 뜬다.