회원가입 시 유효성 검사

JavaScript 파일 만들기

ID부분

let elInputUsername = document.querySelector('#username')
console.log(elInputUsername);

elInputUsername.value = 'your name'  

• ID부분의 id를 'username'으로 할당했기 때문에 #을 시용한다.
• elInputUsername.value를 통해 ID부분 text박스안에 기본적으로 'your name'이 표현되게 구현했다.

let elFailureMessage = document.querySelector('.failure-message')
console.log(elFailureMessage)

let elSuccessMessage = document.querySelector('.success-message')

• elfailureMessage에 html에 할당해놨던 failure-message인 '아이디는 네 글자 이상이어야 합니다.'라는 문구를 할당한다. elsuccessMessage도 똑같이 세팅한다.

function isMoreThan4Length(value) {
    return value.length >= 4
}

• 4글자 이상일 때 value값이 리턴되도록 함수를 설정한다.

elInputUsername.onkeyup = function() {

    if(isMoreThan4Length(elInputUsername.value)) {
        //성공 메시지 보여야 함
        elSuccessMessage.classList.remove('hide')
        
        //실패 메시지가 가려져야 함
        elFailureMessage.classList.add('hide')
    } 
    else {
        //성공 메시지가 가려져야 함
        elSuccessMessage.classList.add('hide')
        
        //실패 메시지가 보여야 함
        elFailureMessage.classList.remove('hide')
    }
}

• onkeyup : 키를 눌렀다가 땠을 때 이벤트이다 (onkeydown 에서 인식하는 키들을 인식 한다). 키보드 입력 시 동작 시점에 따라 발생하는 키보드 이벤트이다.
• 위의 코드를 보면 value값이 4글자이상일 때 성공 메시지 이벤트가 발생되도록 하고 4글자 미만일 때 실패 메시지가 나오도록 한다.

Password 부분

function isMatch(password1, password2) {
    if(password1===password2) {
      return true
    }
    return false
}

• Password 부분에서는 처음 부분의 password와 checkpassword부분이 똑같을 때 매칭한다는 메시지를 구현해야 되기 때문에 password === checkpassword가 같을 때 true고 다를 땐 false로 함수를 구성한다.

let elInputPassword = document.querySelector('#password')
let elInputCheckPassword = document.querySelector('#password-retype')

let passwordFailure = document.querySelector('.mismatch-message')
    console.log(passwordFailure)
 
elInputCheckPassword.onkeyup = function() { 
    
    if(isMatch(elInputPassword.value, elInputCheckPassword.value)) {
      passwordFailure.classList.add('hide')
    }
    else {
      passwordFailure.classList.remove('hide')
    }
  }

• html에서 mismatch-message에 할당했던 '비밀번호가 다릅니다'이 text를 password와 checkpassword의 value값이 다를 때 나올 수 있도록 코딩을 했다.

유효성 검사(1)에서 만들었던 html파일에 css, js를 link해서 구현시키면 깡통만 있는 웹사이트가 아니라 실질적으로 동작을 하는 웹사이트를 만들 수 있다.