[JavaScript / jQuery] 모달창 내 비밀번호 조건 미달 경고 메시지 만들기

💡 실습 포인트!

• 비밀번호를 8자리 이상으로 설정하도록 유도하기 위해, 비밀번호 입력창이 공백이 아니고 8자리 미만으로 입력했을 경우 비밀번호 입력창 하단에 "비밀번호가 8자리 미만입니다." 라는 문구가 나타나도록 했다.
• 이 때 활용한 이벤트는 input 이벤트인데, 이번 수업에서 input 이벤트와 change 이벤트의 차이에 대해서 공부했다.
  • 먼저, input 이벤트는 input 에 입력한 값이 바뀔 때마다 발생하는 이벤트이다.
  • change 이벤트는 input 이벤트와 유사해보이지만 input 에 입력한 값이 바뀌고나서 포커스를 잃을 때에서야 비로소 발생하는 이벤트이다.

---

💜 HTML

<div id="pw-text">비밀번호가 8자리 미만입니다.</div>

• 일단 id 가 password 인 태그 아래에 위와 같이 경고 문구를 넣은 div 박스 태그를 넣어주었다.

💜 CSS

#pw-text {
  color: red;
  font-weight: bold;
  margin-top: 5px;
}

• 아무래도 경고의 느낌이 나야하니까 굵고 빨간 글씨로 만들어주었다.

💜 JavaScript

$('#pw-text').hide();
$('#password').on('input', function(){
    if($('#password').val() != '' && $('#password').val().length < 8){
        $('#pw-text').show();
    } else {
        $('#pw-text').hide();
    }
})

• 비밀번호 입력창 아래에 경고 문구는 첫 화면에서는 보이지 않아야 하므로 jQuery 문법의 hide 를 이용해서 일단 숨겨주었다.
• 그리고 input 이벤트와 jQuery 문법의 show 를 활용해서 비밀번호 입력창에 비밀번호를 입력할 때, 작성된 내용이 있는데 그 작성된 내용의 길이가 8보다 작은 경우에만 경고 문구가 보여지게 했다.
• 그리고 나머지의 경우에는 다시 hide 처리를 하여 해당 경고 문구가 보여지지 않도로 해주었다.