[Vue] vuelidate를 사용하여 폼 검증하기 (Vue2)

 

1. vuelidate 라이브러리 설치

npm install vuelidate

https://www.npmjs.com/package/vuelidate

vuelidate

 

2. 전역 등록

// main.js

import Vuelidate from 'vuelidate';
Vue.use(Vuelidate);

 

3.

<template>
	<div>
      <label for="name">이름</label>
      <input type="text" id="name" v-model="form.name">
      <p v-show="$v.form.name.$error">이름을 입력해 주세요.<p>
      
      <label for="phone">번호</label>
      <input type="phone" id="phone" v-model="form.phone">
      <p v-show="$v.form.phone.$error">휴대폰번호를 입력해 주세요.<p>
      
      <label for="email">이메일</label>
      <input type="email" id="email" v-model="form.email">
      <p v-show="$v.form.phone.$error">{{ error.email }}<p>
      
      <button v-on:click="save">저장</button>
	</div>
</template>

<script>
import { required } from 'vuelidate/lib/validators';
export default {
	data() {
    	return {
        	form: {
            	name: '',
                phone: '',
                email: '',
            },
            error: {
            	email: '이메일을 입력해주세요.'
            },
        }
    },
    methods: {
    	save() {
        	this.$v.$touch();
			// 유효성 검사가 정상적으로 이루어진 후
        }
    },
    validations: {
    	form: {
        	name: { required },
            phone: { required },
            email: { 
            	test(val) {
                	if(!val) return;
                   
                    // 이메일 정규식
                    const regex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[]\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
                    if(!regex.test(val)) {
                    	this.error.email = '이메일을 확인해 주세요.';
                        return;
                    }
                    return true;
                }
            },
        }
    }
}
</script>