12. email validation 체크 만들기

< 하고 싶은것 >

 

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를 입력했을시 화면