나만의 회원가입 페이지 (부제 : 유효성검사)

오늘은 나만의 회원가입 페이지를 만들어 보았다. 📸
변수의 네이밍과 아이디와 비밀번호 유효성 그리고 가시성까지 최대한 고려하면서 만들었다..!!!

🕹유효성 검사 항목

1. 아이디는 4자이장인 영어와 숫자로만 입력되게

function onlyNumberAndEnglish(str) {
  return /^[A-Za-z][A-Za-z0-9]{3,10}$/.test(str);
}//정규표현식사용

elInputUsername.onkeyup = function () {
  if(onlyNumberAndEnglish(elInputUsername.value)){
    //성공메세지가 보여야함, 실패메세지가 안보여야함
    elSuccessMessage.classList.remove('hide')
    elFailureMessage.classList.add('hide')
  }else{
    //실패메세지가 보여야함, 성공메세지가 안보여야함
    elFailureMessage.classList.remove('hide')
    elSuccessMessage.classList.add('hide')
  }
}//username input

2. 비밀번호는 최소 8자 이상, 알파벳과 숫자 및 특수문자는 하나 이상 포함

function strongPassword(str) {
  return /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/.test(str);
}//정규표현식

elInputPassword.onkeyup = function () {
  if(strongPassword(elInputPassword.value)){
    //값은 true / successmessageremove / failuremsessagehide
    elSuccessPassword.classList.remove('hide')
    elfailurePassword.classList.add('hide')
  }else{
    elSuccessPassword.classList.add('hide')
    elfailurePassword.classList.remove('hide')
  }
}//password input

3. 비밀번호와 입력창이 똑같을 때 일치한다는 문구 나오게함

function isMatch (password1, password2) {
  if(password1 === password2){
    return true;
  }
  else {
    return false;
  }
  
  elInputPasswordRetype.onkeyup = function () {
    if(isMatch(elInputPassword.value, elInputPasswordRetype.value)){
     //비밀번호 같음.
      missmatchMessage.classList.add('hide')
      matchMessage.classList.remove('hide')
  }else{
    //비밀번호 다름
    missmatchMessage.classList.remove('hide')
    matchMessage.classList.add('hide')
    }
}

4. 세 input중에 하나라도 빈곳이 있으면 '빈 곳이 있습니다!' 경고창 알림
5. 비밀번호와 비밀번호 확인창이 같지 않으면 '비밀번호가 일치하지 않습니다!' 경고창 알림
6. 세 input이 모두 채워지고 버튼을 누르면 '회원가입완료' 알림

function validateRequred(value){
  return value === ''
}

function notice() {
  //아이디와 비밀번호,재비밀번호 입력창이 다 채워져있을때 회원가입 완료 창 뜨게하기
  
  if(validateRequred(elInputUsername.value)||validateRequred(elInputPassword.value)||validateRequred(elInputPasswordRetype.value)){
    alert('빈 곳이 있습니다!')
  } 
  else if(elInputPassword.value!==elInputPasswordRetype.value){
    alert('비밀번호가 다릅니다!')
  }else {
    alert('회원가입완료')
  }
}

button.addEventListener('click', notice)

자세한 동작은 밑을 참고해주세요! (업로드에 시간이 걸립니다)