반응형
< 하고 싶은것 >
1. username input이 email이 아닐 경우에 비활성화 처리
- 정규표현식 필요 (이미 잘 만들어져 있는걸 사용하자)
- computed 속성 필요
2. 아이디, 패스워드가 없으면 로그인버튼 비활성화
- html 정규 표현식 disabled 필요
1. 여러 컴포넌트에서 사용할거면 utils 폴더를 만들고 valdation.js 파일로 따로 빼놓자
const validateEmail = email => {
return String(email)
.toLowerCase()
.match(
/^(([^<>()[\]\\.,;:\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,}))$/,
);
};
export { validateEmail };
2. 사용할 컴포넌트에 import 시켜주자
3. computed 속성에 validation 체크 할 함수를 만들어주자
- computed 속성 : 데이터 변화에 따라서 내용을 자동으로 계산해주는 연산 식
<template>
<form @submit.prevent="submitForm">
<div>
<label for="username">id: </label>
<input id="username" type="text" v-model="username" />
</div>
<div>
<label for="password">pw: </label>
<input id="password" type="password" v-model="password" />
</div>
<button :disabled="!isUsernameValid || !password" type="submit">
로그인
</button>
<p>{{ logMessage }}</p>
</form>
</template>
<script>
import { loginUser } from '@/api/index';
import { validateEmail } from '@/utils/validation';
export default {
data() {
return {
username: '',
password: '',
logMessage: '',
};
},
mounted() {},
computed: {
// 이 속성은 데이터 변화에 따라서 내용을 자동으로 계산해주는 연산 식
isUsernameValid() {
return validateEmail(this.username);
},
},
methods: {
async submitForm() {
try {
// 비지니스 로직
const userData = {
username: this.username,
password: this.password,
};
const { data } = await loginUser(userData);
console.log(data.user.nickname);
this.logMessage = `${data.user.nickname}님 환영합니다`;
} catch (error) {
// 에러 핸들링할 코드
// console.log(error.response);
this.logMessage = error.response.data;
} finally {
// ininFrom() 함수가 중복될 경우 finally 함수를 이용해서 끝에다 넣으면 된다
this.initFrom();
}
},
initFrom() {
this.username = '';
this.password = '';
},
},
};
</script>
<style lang="scss" scoped></style>
4. 완성
- 이러면 input 입력 방식이 email이 아니면 로그인 버튼이 비활성화
- password 까지 입력받아서 하고 싶으면 v-bind:disabled="!isUsernameValid || !password" 추가 하면 된다
- v-bind 는 줄여서 사용 가능함 :disabled="" 로 사용가능
emali 형식이 아니고 password 입력을 안했을시 화면
email 형식이고 password를 입력했을시 화면
반응형
'vue.js > vue.js 2' 카테고리의 다른 글
118. 로그인 후 처리 | 컴포넌트 간 데이터 전달방법 3가지 | vuex store 사용 (0) | 2023.01.24 |
---|---|
117. 로그인 후 Main 페이지 이동 | this.$router.push('/main'); (0) | 2023.01.18 |
115. 에러 메시지 출력 및 에러 피드백 표시 방법 (0) | 2022.11.22 |
114. 네트워크 에러 확인 방법과 에러 처리 코드 구현 | async & await 에러 처리 방법 (0) | 2022.10.17 |
113. 로그인 기능 구현 (0) | 2022.10.17 |