로그인 입력 폼 구현하기 _ 유효성 검사# 수정

 

로그인 입력 폼 구현하기

---

 

이번 미니 프로잭트는 로그인 입력 폼 구현하기 이다!!  벌써 이런걸 만들어 보다니... 내 자신이 너무 기특하다.. ㅋㅋㅋ 하지만 결과물이 그렇게 이쁘지는 않다.. 그래도 한단계 한단계 성장하는 ? 느낌이 든다. ㅎ?

 

자꾸 무엇인가를 만드는 연습을 해야 될 것같다!!! 처음에만 고통스럽지 뭔가 하나 하나씩 만들어지고 가공되는 아름다운 모습들을 바라보면 이렇게 황홀할 수가 없다... 

 

 

미니프로잭트 결과물

---

 

 

▷  사용 프로그램? - vscode

▷  기술스택? - html, css, javascript

▷  참고자료 - 웹 프로그래밍 튜토리얼, 코드스테이츠 강의

 

 

좋았던점!!!

이해하기 어려웠지만 하나씩 풀릴때 느껴지는 희열이 너무 좋았다

 

1. 이번 미니프로잭트로 인해 DOM에 대해 살짝? 익숙해진점!

 

2. 단기간에 뭔가 하나를 만든점 ? 뿌듯

 

3. 정규표현식 지식 습득!!

 

아쉬운점...

아직까지 완벽하게 습득한 것 보단 검색을 통해서 한다는점 ? 시간이 너무 오래 걸린다...

 

1. 사용자 인터렉션을 좀 더 직관적이고 효과적으로 표현하지 못한점...

 

2. 유지보수가 용의 하지 않음... 하나의 함수로 다양한 기능을 구현하지 못함...

 

3. 너무 기본적인 것만 구현한점...

 

 

로그인 화면 js

let btn = document.querySelector('#btn-signup')
 
 
const elInputUsername = document.querySelector('#username')
const elInputpassword = document.querySelector('.password')
 
btn.onclick = function () {
    if(elInputUsername.value === '' && elInputpassword.value === ''){
        alert('아이디와 비밀번호를 입력해주세요');
    }else{ 
        alert('로그인 완료!!');
    }
  };
 
 

 

회원가입 js

// 아이디 변수 
let elInputUsername = document.querySelector('#username')
let elFailuremessage = document.querySelector('.failure-message')
let elSuccessmessage = document.querySelector('.success-message')
 
// 비밀 번호 변수
const elPassword = document.querySelector('.password')
const elPasswordRe = document.querySelector('.password-retype')
const elMismatch = document.querySelector('.mismatch-message')
const clearmatch = document.querySelector('.clear-message')
 
// 이메일 변수
const inputEmail = document.querySelector('.email')
const inputtrueEmail =document.querySelector('.trueEmail')
const inputfalseEmail = document.querySelector('.falseEmail')
 
// 회원가입 버튼 변수
const btn = document.querySelector('#btn-signup')
 
 
// 아이디 유효성 
 
elInputUsername.onkeyup = function () {
  if(isMoreThan4Length(elInputUsername.value)){
   //성공메세지가 보여야함
   elSuccessmessage.classList.remove('hide')
   //실패 메세지가 가려져야 함
   elFailuremessage.classList.add('hide')
 }else{
    //성공 메세지가 가려져야 함
    elSuccessmessage.classList.add('hide')
    //실패 메세지가 보여야함 
    elFailuremessage.classList.remove('hide')
   }
}
 
// 비번 유효성
 
elPasswordRe.onkeyup = function(){
    if(isMatch(elPassword.value, elPasswordRe.value)){
        elMismatch.classList.add('hide')
        clearmatch.classList.remove('hide')
    }else{
        elMismatch.classList.remove('hide')
        clearmatch.classList.add('hide')
    }
}
 
// 이메일 유효성
 
inputEmail.onkeyup = function(){
    if(isEmail(inputEmail.value)){
        inputtrueEmail.classList.remove('hide')
        inputfalseEmail.classList.add('hide')
    }else{
        inputtrueEmail.classList.add('hide')
        inputfalseEmail.classList.remove('hide')
    }
}
 
 
 
 
// 아디, 비번, 이메일 유효성 함수
 
function isMoreThan4Length(value){
    return value.length >= 4
}
 
 
function isMatch (password1, password2){
    return password1 === password2
}
 
 
function isEmail(asValue) {
 
    let regExp = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;
 
    return regExp.test(asValue); // 형식에 맞는 경우 true 리턴    
}
 

 

 

미니프로잭트 후기

 

이번 유효성 검사는 나름 의미 있는 미니 프로잭트 였습니다!!!  많이 부족하지만 뭔가 구현하는게 너무 신기하고 재미 있었습니다!!

 

너무 아쉽지만 좀 더 다양한 공부를 하고 작은 미니 프로잭트를 하나하나 구현하면서 다음에는 좀 더 큰 프로잭트를 진행 해보고자 합니다!!

 

항상 부족하다 라는 생각을 갖고 성실하게 배워 나가야 겠습니다!

 

 

 

 

 

background image 출처 및 url : https://i.pinimg.com/564x/2e/9f/68/2e9f68afb09991b792d019df6f57da7e.jpg

 

https://www.backgroundscool.com/cool/amazing-huawei-mate-20-lite-wallpapers/

Amazing Huawei Mate 20 Lite Wallpapers – Cool Backgrounds