반응형
< 하고 싶은것 >
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 실무 기능' 카테고리의 다른 글
14. Axios 모듈화 | API 모듈화 (function -> 람다) (0) | 2024.01.14 |
---|---|
13. Canvas로 이미지 확대,축소,이동 구현 (0) | 2023.11.20 |
11. vue로 Modal창, Modal Drag 구현 | v-for, v-if (0) | 2023.01.15 |
10. vue.js 클래스에 숫자 넣고 싶을때 :clsss (0) | 2023.01.08 |
9. [vue-js-modal] Modal | vue.js 모달 드래그 (0) | 2023.01.01 |