유효성 검사

→ 만약 html에서 해당 요소가 이벤트를 통해 상태가 변화할 경우 그 상태에 따라 다른 요소의 상태를 변경하려는 경우 함수로 해당 요소의 상태를 변경시켜 놓고 이벤트로 상태가 변화할때 마다 해당 함수를 호출해서 실시간으로 상태를 변경한다

ex) 아이디, 비밀번호, 전화번호의 입력값이 유효성이 통과한 경우 버튼을 활성화한다

/  유효성이 통과하지 않으면 버튼은 비활성화

/  1) 아이디,비밀번호,전화번호가 유효성이 통과하면 버튼을 활성화하는 함수 작성

/  2) 아이디,비밀번호,전화번호가 이벤트 발생하여 유효성 통과시 해당 함수를 호출하여 만약 3조건이 모두 통과시 버튼이 활성화 되도록 한다.

/  2-1) 만약 이벤트가 발생하였지만 유효성이 통과하지 않은 경우 버튼을 비활성화 한다

---

→ 만약 비밀번호 이벤트가 발생하여 유효성 검사를 할때

[일부 요소 유효성 검사]

elInputPasswordRetype.onkeyup = function() {

  if(isMatch(elIputPassword.value,elInputPasswordRetype.value)) {

    elMisMatchMessage.classList.add('hide')

    isRight()  // 유효성 검사를 통과한 경우 유효성 검사가 필요한 요소가 모두 유효성검사를 통과한 경우 버튼 활성화

  }

  else {

    elMisMatchMessage.classList.remove('hide')

    isRight()  // 유효성 검사를 통과 못한 경우 버튼 비활성화

  }

}

 

→ 유효성 검사가 필요한 모든 요소가 유효성 검사를 통과한 경우 버튼을 활성화 하는 함수

→ 이 함수를 이벤트 발생시 마다 호출하여서 요소의 상태를 실시간 체크하여 모든 유효성 통과여부에 따라 버튼 활성화 여부 결정

[버튼을 활성화 해주는 함수]

function isRight() {

// 유효성 검사가 필요한 모든 요소의 유효성 검사 통과여부를 조건문으로 확인

 if(isMoreThan4Length(elInputUsername.value) && isMatch(elIputPassword.value,elInputPasswordRetype.value)

 && is8Length(elPhoneNumber.value)) {

   // 모든 유효성 검사가 통과한 경우 버튼을 활성화

   elSignUpButton.disabled = false

 }

 else {

  // 하나라도 유효성 검사를 통과하지 못한 경우 버튼을 비활성화

   elSignUpButton.disabled = true

 }

}

 

----------------------------------------------------------------------------------------------------------------------------

→ 만약 조건이 복잡한 경우 따로 변수에 저장하여서 console.log를 통해 조건이 어떻게 작동하는지 확인하는 방법도 있음

→ event객체를 사용하기 위해서는 이벤트 핸들러 함수의 파라미터에 event를 넘겨준다

→ event.target은 이벤트가 발생한 요소를 지정한다.

→ 이벤트 핸들러 함수를 event로 파라미터 설정시 여러 요소에서 같은 함수를 사용할 수 있음

→ 함수의 모듈화가 가능하다.

 

→ css에서는 같은 요소에 같은효과를 줄 경우 가장 아래에 있는 효과만 적용이 된다(가장 최하단이 적용된다)

→ 클래스명을 지정한 다음 원하는 css효과를 넣어주고 자바스크립트에서 클래스명 추가,삭제로 원하는 css효과를 추가하거나 제거한다.

 

// [유효성 검증 함수]: 영어 또는 숫자만 가능

function onlyNumberAndEnglish(str) {

 return /^[A-Za-z0-9][A-Za-z0-9]*$/.test(str);

}

→ 정규표현식에 test()메소드를 이용하여 해당 문자열이 정규표현식에 부합하는지 안하는지 파악가능

→ test()메소드의 반환값은 부합하면 true, 부합하지 않으면 false