오늘도 41강 UI 컴포넌트 제작부분 17번째 클립부터 20번째 클립까지 들었다
17번째 클립은 어제에 이어서 로그인 폼부분에 만약 아이디가 틀렸으면
빨간 테두리를 표현할 수 있는 법에 대해서 배웠다
FORM 유효성 검사 마무리
<예시>
<app.vue>
<template>
<div>
<form v-on:submit.prevent="submitform">
<div>
<label for="username">ID: </label>
<input id="username" type="text" v-model="username"
class="username-input error"
v-bind:class= "{'error': isError }">//여기 추가
//class="username-input"
//v-bind:class= "{'error': false }"> //false면 이렇게
//class="username-input error"
//v-bind:class= "{'error': true }">//여기 추가
</div>
<div>
<lavel for="password">PW: </label>
<input id="password" type="password" v-model="password">
</div>
<button v-bin:disabled="!isUsernameValid" type="submit">로그인</button> //맞을때만 로그인버튼을
</form> 클릭할 수 있게 되어잇음
<p v-if="isError">올바르지 않은 ID입니다</p> //올바르지않은 아이디폼 #등을 입력하면 자동으로 뜸
<p v-if="isUsernameValid">이메일 형식이 맞습니다</P>
</div>
</template>
<script>
//이메일 형식 체크함수
function validateEmail(email) {
const re = /^(([^<>()\[\]\\.,;:\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,}))$/;
return re.test(String(email).toLowerCase());
}
export default {
data() {
return {
username: '',
password: '',
isError: false,
};
},
computed:{
isUsernameValid() {
return validateEmail(this.username);
}
},
methods: {
submitForm(event) {
//event.preventDefault();
console.log('로그인';)
//axios
// .post()
// .then()
// .catch(error => {
// this.isError = true;
// });
this.isError = true;
this.initForm();
},
initForm() { //로그인이 되면 지워짐
this.username = '';
this.password = '';
}
}
};
</script>
<style scoped> //scoped 현재 컴포넌트에만 적용
.usename-input {
outline: none;
}
.username-input.error{
border: 1px solid red;
}
</style>
ToastPopup소개
또 다른 UI컴포넌트
(ex)지메일 앱에서 메세지를 보냈을 때 메세지를 보냈습니다 라고 뜨는 작은 알람메시지 같은 거
ToastPopup 컴포넌트 등록
npm run serve 쓰면 local host 8080 뜸
<예시>
<app.vue>
<template>
<div>
<form v-on:submit.prevent="submitform">
<div>
<label for="username">ID: </label>
<input id="username" type="text" v-model="username"
class="username-input error"
v-bind:class= "{'error': isError }">//여기 추가
//class="username-input"
//v-bind:class= "{'error': false }"> //false면 이렇게
//class="username-input error"
//v-bind:class= "{'error': true }">//여기 추가
</div>
<div>
<lavel for="password">PW: </label>
<input id="password" type="password" v-model="password">
</div>
<button v-bin:disabled="!isUsernameValid" type="submit">로그인</button> //맞을때만 로그인버튼을
</form> 클릭할 수 있게 되어잇음
<p v-if="isError">올바르지 않은 ID입니다</p> //올바르지않은 아이디폼 #등을 입력하면 자동으로 뜸
<p v-if="isUsernameValid">이메일 형식이 맞습니다</P>
<ToastPopup></ToastPopup> //대소문자 구분은 안함, toast-popup써도 인식은 함
</div>
</template>
<script>
//vim치면 자동으로 import쓸 수 있는 명령어 생성
import ToastPopup from '@/components/toastpopup.vue';
//이메일 형식 체크함수
function validateEmail(email) {
const re = /^(([^<>()\[\]\\.,;:\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,}))$/;
return re.test(String(email).toLowerCase());
}
export default {
components: { /
'ToastPopup': ToastPopup //문자열: 변수, 문자열에 ''생략가능, toastpopup만 써도 됨
},
data() {
return {
username: '',
password: '',
isError: false,
};
},
computed:{
isUsernameValid() {
return validateEmail(this.username);
}
},
methods: {
submitForm(event) {
//event.preventDefault();
console.log('로그인';)
axios. post();
//axios
// .post()
// .then()
// .catch(error => {
// this.isError = true;
// });
this.isError = true;
this.initForm();
},
initForm() { //로그인이 되면 지워짐
this.username = '';
this.password = '';
}
}
};
</script>
<style scoped> //scoped 현재 컴포넌트에만 적용
.usename-input {
outline: none;
}
.username-input.error{
border: 1px solid red;
}
</style>
<toastpopup.vue>
//vue치면 기본생성
<template>
<div>
토스트 팝업
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
ToastPopup 마크업 스타일링
<예시>
<크롬 개발자환경>
<!DOCTYPE html>
<html lang="en">
<head>...</head>
<body>
<nonscript>...</nonscript>
<div data-v-7ba5bd90>
<form data-v-7ba5bd90>...</form>
<!---->
<p data-v-7ba5bd90>이메일 형식이 맞습니다.</p>
<div data-v-7ba5bd90 style="
width: 200px;
height: 50px;
background-color: black;
color: white;
display: flex;
justify-content: center;
align-items: center;
">토스트팝업</div> == $0
</div>
<!--built files will be auto injcected-->
<script type="text/javascript" src="/js/chunk-vendors/js"></script>
<script type="text/javascript" src="/js/app.js">
</script>
</body>
</html>
<toastpopup.vue>
<template>
<div class="toast">토스트 팝업</div>
</template>
<script>
export default {
}
</script>
<style scoped> //현재 컴포넌트만
.toast {
width: 200px;
height: 50px;
background-color: black;
color: white;
display: flex;
justify-content: center;
align-items: center;
position: //왼쪽 아래에 넣으려면, 하지만 웹페이지에서 하면 더 좋음!
}
</style>
<크롬 개발자환경>이부분 추가
<div data-v-7ba5bd90 class="toast" style="
position: fixed;
bottom: 5%;
left: 5%;
">토스트팝업</div> == $0
와 벌써 내일이면 종강이다!
프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스
성인 교육 서비스 기업, 패스트캠퍼스는 개인과 조직의 실질적인 '업(業)'의 성장을 돕고자 모든 종류의 교육 콘텐츠 서비스를 제공하는 대한민국 No. 1 교육 서비스 회사입니다.
www.fastcampus.co.kr
'패스트캠퍼스 챌린지 < 프론트엔드-react>' 카테고리의 다른 글
| 패스트캠퍼스 프론트엔드 강의 챌린지 참여 후기 (0) | 2020.09.15 |
|---|---|
| [패스트캠퍼스 수강후기] 프론트엔드 강의 61회차 미션 (0) | 2020.08.28 |
| [패스트캠퍼스 수강후기] 프론트엔드 강의 59회차 미션 (0) | 2020.08.26 |
| [패스트캠퍼스 수강후기] 프론트엔드 강의 58회차 미션 (0) | 2020.08.25 |
| [패스트캠퍼스 수강후기] 프론트엔드 강의 57회차 미션 (0) | 2020.08.24 |
