개요
과제에서 로그인 파트담당하면서 이메일/비밀번호 유효성을 구현했어야하는데 몰랐던 부분이 있어서 정리하고자 한다.
구현 한 화면
- 형식에 맞지 않거나 빈칸이면 빨간색으로 에러가 나타나게 된다.
- 형식에 맞게 입력하는 것을 실시간으로 판단하여 에러가 없어진다.
<template>
<!-- 이메일 입력 -->
<div class="input-box">
<h3
class="input-title"
:class="{ 'title-danger': emailHasError }">
이메일 주소
</h3>
<input
v-model="email"
class="input-item"
type="text"
placeholder="예) kream@kream.co.kr"
:class="{ 'input-danger': emailHasError }" />
<p
v-show="valid.email"
class="input-error">
이메일 주소를 정확히 입력해주세요.
</p>
</div> “이메일 주소를 정확히 입력해주세요” 같은 에러 문구는 v-show boolean데이터로 제어한다.
기본값 false이다.
“이메일 주소“같은 타이틀과 border-bottom 값 스타일이 에러 일 때 빨간색으로 변하는 것은 class에 데이터 바인딩으로 error값을 지정 해주고 기본값 false로 한다.
HTML 클래스 바인딩하기
(이부분은 공식문서를 참고했다.)
script
export default {
data() {
return {
valid: {
email: false,
password: false,
},
emailHasError: false,
passwordHasError: false,
}
},
computed: {
...mapStores(useAuthStore)
},
watch: {
'email': function() {
this.checkEmail()
},
'password': function() {
this.checkPassword()
},
},```
`v-model`로 걸어둔 email이랑 password input창이 변하는것을 `watch`로 감시하고 변경이되면 `methods`가 실행된다. 따라서 실시간으로 이메일 형식이 맞는지 판단할 수 있다.
```html
<!-- template -->
:class="{ 'title-danger': emailHasError }"/* CSS
Error */
.input-error {
line-height: 16px;
font-size: 11px;
color: $color-error;
}
.title-danger {
color: $color-error;
}
.input-danger {
border-bottom: 1px solid $color-error !important;
}methods
이메일 형식 검사
checkEmail() {
// 이메일 형식 검사
const validateEmail = /^[A-Za-z0-9_\\.\\-]+@[A-Za-z0-9\\-]+\.[A-Za-z0-9\\-]+/비밀번호 형식 검사
checkPassword() {
// 비밀번호 형식 검사(영문, 숫자, 특수문자)
const validatePassword = /^(?=.*[a-zA-z])(?=.*[0-9])(?=.*[$`~!@$!%*#^?&\\(\\)\-_=+]).{8,16}$/유효성 검사 코드를 넣고 if문을 작성했다.
checkEmail() {
// 이메일 형식 검사
const validateEmail = /^[A-Za-z0-9_\\.\\-]+@[A-Za-z0-9\\-]+\.[A-Za-z0-9\\-]+/
if (!validateEmail.test(this.email) || !this.email) {
this.valid.email = true
this.emailHasError = true
return
} this.valid.email = false
this.emailHasError = false
},이메일 형식에 맞지 않고 빈칸이면 true를 반환해서 에러문구가 뜨게 된다.
여기서 .test 메서드는 어진 문자열이 정규 표현식을 만족하는지 판별하고, 그 여부를 true 또는 false로 반환한다.
비밀번호도 같은 방식으로 진행했다.
회고
에러일 경우 스타일이 바뀌는 것을 true false 값에 따라서 바뀌게끔 구현해야 할 것 같다고 생각은 드는데 어떻게 할지 감이 안와서 처음엔 ref로 강제로 스타일 제어했었다. if문이 ref 범벅이되자.. 아 이건 아니다 싶어서 계속 검색했고 script의 data부분에 반응형 데이터를 지정해놓고 v-show나 클래스 바인딩을 이용해서 리팩토링했는데 코드가 훨씬 깔끔해졌다. 이전에 배웠지만 응용하기에 어려웠었던 것 같다. 이번 기회로 응용해볼 수 있어서 뿌듯하다. (공부 더 하자 😅)
Frontend developer