[Vue.js] 회원가입 폼 만들기(3) - 중복체크

 

사용자가 email을 입력하는 input에서 벗어나면 자동으로 이메일 중복체크를 하도록 구현할 것이다.

 

1. View

<div class="form-group mb-3">
	<label for="email">Email</label>
	<input type="text" class="form-control" id="email" v-model="email" placeholder="Enter email" @blur="checkDuplicate" />
	<span class="badge badge-danger mt-1" v-if="!availableEmail">이미 사용중인 이메일입니다.</span>
	<span class="badge badge-danger mt-1" v-if="!availableEmailForm">이메일 형식이 다릅니다.</span>
</div>

 

 

@blur="함수명" 을 사용  : 포커스를 벗어나면(사용자가 input을 이탈하면) 자동으로 method가 실행된다.

 

2.Method

async checkDuplicate() {
	//일단은 사용가능한 이메일로 true로 초기화 한다.
	this.availableEmail = true;
    
    //이메일 유효성을 검사한다.
	if (!validateEmail(this.email)) {
		//유효성이 틀리다면 data 값을 false로 한다.
        this.availableEmailForm = false;
		return;
	} else {
		this.availableEmailForm = true;
	}
    
    //이메일 중복체크를 한다.
	const response = await checkDuplicateEmail(this.email);
	if (!response.data) {
		this.availableEmail = false;
	} else {
		this.availableEmail = true;
	}
},

(구현하다 보니 이메일 유효성 검사가 checkDuplicate에 들어갔는데 분리하는 것이 좋을듯..)

 

method에서 data 값을 변경 시켜주기 때문에 View에 연결된 에러 v-if가 동작하여 false 일때만 표시된다.