Nuxt.js Simple-Vue-Validator

🚀Nuxt.js에서 Simple-Vue-Validator 적용하기

auth : corner
date : 2022-08-22

주절

Vue.js에서 Simple-Vue-Validator를 매우 유용하게 사용했던지라 Nuxt에서 사용 해보려고 합니다.

Setup

프로젝트에 패키지 설치

npm install --save simple-vue-validator

/mixins디렉토리에 /validators/ 경로를 추가한 뒤 사용할 validator.js를 만듭니다.

저의 경우 회원 관련 유효성 검사를 위해 memberValidator.js로 생성합니다.

memberValidator.js

import Vue from 'vue';
import SimpleVueValidation from 'simple-vue-validator';
const Validator = SimpleVueValidation.Validator;

Vue.use(SimpleVueValidation);

export default {
    data() {
        return {
            // register에서 사용할 data 선언
            nickname: '',
        }
    },
    computed: {},
    validators: {
        nickname: function (value) {
            let msg = "닉네임은 최소 2~20자, 필수로 입력합니다.";
            return Validator.value(value)
                .required(msg)
                .minLength(2, msg)
                .maxLength(20, msg)
        },
    },

    methods: {
    },
}

Usage

<el-input type="text" class="input input_text" placeholder="신청자 이름을 입력해주세요" @input="setData('nickname',nickname)"
          v-model="nickname"/>
<div class="validation" v-if="validation.hasError('nickname')">
  {{ validation.firstError('nickname') }}
</div>

<script>
import memberValidator from "@/mixins/validators/memberValidator";

export default {
    name: "RegisterPage",
    mixins: [memberValidator],
    data() {
        return {
            nickname: "",
        }
    },
    methods: {
        setData(key, value) {
            this[key] = value;
        },
        checkValidator() {
            this.$validate(['nickname', 'email', 'password', 'password_confirm']).then((res) => {
                if (res) {
                    console.log(res);
                }
            });
        },
    },
}
</script>