비밀번호 안전성, 아이디 등록 조건 유효성 검증 및 modal popup

아이디를 영어 또는 숫자만 가능하다는 조건을 붙이는 함수

function onlyNumberAndEnglish(str) {
  return /^[A-Za-z][A-Za-z0-9]*$/.test(str);
}

비밀번호를 최소 8자 이상이면서, 알파벳과 숫자 및 특수문자는 하나이상 포함인 조건을 붙이는 함수

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

지난번 아이디 비밀번호 유효성 검증의 각각 코드를 추가하였다

HTML

<div id="myModal" class="modal">
    <div class="modal-content">
      <span class="close">&times;</span>
      <p>회원가입이 정상적으로 완료되었습니다.</p>
    </div>
  </div>

button 속성에 id값을 추가하여야 한다.

CSS

.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
.modal-content {
 background-color: #fefefe;
 margin: 15% auto;
 padding: 20px;
 border: 1px solid #888;
 width: 50%;
}
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.hide {
  display: none;
}

.modal-content의 back-ground를 설정해주지 않으면 투명하게 보일 수 있으므로 불투명하세 설정해줘야한다.

또한 .modal의 display: none;을 설정하여서 버튼을 누르기 전엔 보이지 않게 설정한다.

JS

var elInputUsername = document.querySelector('#username')
var elInputPassword = document.querySelector('#password')
var elInputPassword2 = document.querySelector('#password-retype')

var elFailureMessage = document.querySelector('.failure-message')
var elSuccessMessage = document.querySelector('.success-message')
var elMismatchMessage = document.querySelector('.mismatch-message')
var elNumenMessage = document.querySelector('.numen-message')
var elStrpasswordMessage = document.querySelector('.strpassword-message')


elInputUsername.onkeyup = function () {
    if (isMoreThan4Length(elInputUsername.value)) {
        elSuccessMessage.classList.remove('hide')//성공메시지 표시
        elFailureMessage.classList.add('hide')//실패메세지 가려짐
    }
    else {
        elSuccessMessage.classList.add('hide')
        elFailureMessage.classList.remove('hide')
    }
    if (onlyNumberAndEnglish(elInputUsername.value)) {
        elNumenMessage.classList.add('hide')
    }
    else {
        elNumenMessage.classList.remove('hide')
    }
}


elInputPassword.onkeyup = function () {
    if (strongPassword(elInputPassword.value)) {
        elStrpasswordMessage.classList.add('hide')
    }
    else {
        elStrpasswordMessage.classList.remove('hide')
    }
}


elInputPassword2.onkeyup = function () {
    if (isMatch(elInputPassword.value, elInputPassword2.value)) {
        elMismatchMessage.classList.add('hide')//비밀번호일치
    }
    else {
        elMismatchMessage.classList.remove('hide')//비밀번호불일치
    }
}
function isMoreThan4Length(value) {
    return value.length >= 4
}

function isMatch(password, password2) {
    if (password === password2) {
        return true;
    }
    else {
        return false
    }
}

// [유효성 검증 함수]: 영어 또는 숫자만 가능
function onlyNumberAndEnglish(str) {
    return /^[A-Za-z][A-Za-z0-9]*$/.test(str);
}
// [유효성 검증 함수]: 최소 8자 이상하면서, 알파벳과 숫자 및 특수문자(@$!%*#?&) 는 하나 이상 포함
function strongPassword(str) {
    return /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/.test(str);
}
var modal = document.getElementById('myModal');
var btn = document.getElementById("btn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function(){
    modal.style.display = "block";
}
span.onclick = function(){
    modal.style.display = "none";
}
window.onclick = function(event){
    if(event.target == modal){
        modal.style.display = "none";
    }
}

개발자 도구에서 콘솔 창을 확인하면 onclick not defined라는 오류가 뜰 수 있는데, 웹페이지를 닫고 저장 후 새로고침 하여 다시 열면

오류가 사라지는 것을 볼 수 있다. html의 아이디 값과 js에서 불러온 아이디값이 같은지 잘 확인하여야 한다.