인프런 커뮤니티 질문&답변

긴장한 곰님의 프로필 이미지
긴장한 곰

작성한 질문수

[리뉴얼] Node.js 교과서 - 기본부터 프로젝트 실습까지

비밀번호 일치 확인 코드

작성

·

1.5K

0

  <div class="timeline">
    <form id="join-form" action="/auth/join" method="post">
      <div class="input-group">
        <label for="join-email">이메일</label>
        <input id="join-email" type="email" name="email"></div>
        <p class="email-content"></p>
      <div class="input-group">
        <label for="join-nick">닉네임</label>
        <input id="join-nick" type="text" name="nick"></div>
      <div class="input-group">
        <label for="join-password">비밀번호</label>
        <input id="join-password" type="password" name="password">
      </div>
      <div class="input-group">
        <label for="join-password2">비밀번호 확인</label>
        <input id="join-password2" type="password" name="password2">
        <p class="password-content"></p>
      </div>
      <button id="join-btn" type="submit" class="btn">회원가입</button>
    </form>
  </div>
{% endblock %}

{% block script %}
  <script>
    window.onload = () => {
      if (new URL(location.href).searchParams.get('error')) {
        alert('이미 존재하는 이메일입니다.');
      }

        const input = document.querySelector('#join-email');
        const p = document.querySelector('.email-content');
        const isEmail = (value=> {
          return (value.indexOf('@') > 1)
            && (value.split('@')[1].indexOf('.') > 1)
        }
        let value;

        input.addEventListener('keyup', (event=> {
          value = event.currentTarget.value;
          if (isEmail(value)) {
            p.style.color = 'green';
            p.textContent = `이메일 형식입니다`;
          } else {
            p.style.color = 'red';
            p.textContent = `이메일 형식이 아닙니다`;
          }
        });

        const isPassword = (value1value2=> {
          return value1 === value2;
        }
        const password1 = document.getElementById('join-password').value;
        let password2;
        const pwd2 = document.querySelector('#join-password2');
        const p2 = document.querySelector('.password-content');
        
        pwd2.addEventListener('keyup', (event=> {
            password2 = event.currentTarget.value;
            if(password1 !== password2){
            p2.style.color = 'red';
            p2.textContent = `비밀번호가 일치하지 않습니다`;
          } else {
            p2.style.color = 'green';
            p2.textContent = `비밀번호가 일치합니다`;
          }
        });

        const btn = document.querySelector('#join-btn');
        let status = ()=>{
          return isEmail(value) && isPassword(password1password2);
        }
        btn.addEventListener('click',(event)=>{
          if(!status()){
            event.preventDefault();
            alert(`모든 항목을 제대로 입력해주십시오`);
          }
        })
    };        
    </script>
{% endblock %}

이메일이 이메일 형식인지 확인하고, 비밀번호가 일치하는지 확인을 하는 작업을 추가하려고 코드를 작성했는데, 이메일의 경우에는 이메일 형식이다 아니다가 정상적으로 잘 작동하는 반면에, 비밀번호의 경우에는 같은 비밀번호를 몇 번을 입력해도 계속해서 비밀번호가 일치하지 않는다는 결과가 출력됩니다. 혹시 이유를 알 수 있을까요 ㅠㅠ 

답변 1

0

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

password1은 keyup 이벤트리스너가 없네요. password1에 값이 안 들어있을 겁니다.

긴장한 곰님의 프로필 이미지
긴장한 곰
질문자

해결했습니다. 감사합니다!!

긴장한 곰님의 프로필 이미지
긴장한 곰

작성한 질문수

질문하기