`4일차` 유효성 검사 파일 만들기

March 7, 2021

1. DOM 의 CRUD

CREATE document.createElement('태그') : 태그가 생성이 되었지만 연결이 되지 않은 상태이므로 화면에 출력되지 않는다. document.createDocumentFragment() : 비어있는 돔 객체. 입맛대로 만들어놓고 한 번에 트리에 추가할 수 있음.

  let element  = document.getElementById('ul') 
  let fragment = document.createDocumentFragment()
  let browsers = ['Firefox', 'Chrome', 'Opera', 'Safari', 'Internet Explorer']
  browsers.forEach(function(browser) {
    let li = document.createElement('li')
    li.textContent = browser
    fragment.appendChild(li)
  })
  element.appendChild(fragment)

READ
- document.querySelector() : 단일 조회
- document.querySelectorAll() : 다수 조회
- get 으로 시작하는 DOM 조회 메소드는 오래된 방식임
- 이렇게 조회된 엘리먼트들은 ‘유사배열’ 로 출력되며 for 문을 사용할 수 있지만 모든 메서드를 공유하진 않는다.
UPDATE
- element.textContent = 태그안에 글자 넣을 수 있음
- element.id = idName = id이름 추가, 변경 가능
- element.classList.add('className') = class 이름 넣기
- element.setAttribute(name, value) = 지정요소(name)의 속성값을 설정. 요소가 없다면 새 요소가 추가됨.
- 현재 속성값 얻으려면 getAttribute() 속성을 제거하려면 removeAtrribute()
- textContent 와 innerHTML 의 차이
- innerHTML 은 텍스트와 더불어 html 요소들을 가져와 수정할 수 있지만 textContent 는 가져오는 값들은 모두 문자열이다.
DELETE
- element.remove() : 해당 엘리먼트 삭제;
- element.removechild() : 자식 엘리먼트를 지정하여 삭제 할 수 있다.;
- innerHTML = "": 가장 간단한 방법이지만, 보안상 문제로 사용하지 않는것이 좋다.;
- textContent=""`;
APPEND
- append : 부모 요소에 자식 요소를 추가(js 메소드) / 여러개 가능 / string 추가 가능 / 반환값 없음;
- appendchild : 부모 요소에 자식 요소를 추가(dom 메소드) / 한개만 가능 / 추가된 node object 값 반환;

2. DOM 의 구체적 사용법

querySelector를 활용해서 html 엘리먼트 정보를 가져올 수 있다.
Onclick 속성이나 addeventlistner 메소드로 이벤트 핸들러 함수를 html에 적용 할 수 있다.
이벤트 핸들러 함수에서 유효성 검사를 할 수 있다.

3. HTML 구성하기 / 부제 : id/class 이름 잘짓기..🙊

<div class="form">
  <label class ="input-form valid">
    <span> Your ID</span>
    <input id="userid" type="text" />
    <span id="id-invalid-message"></span>
  </label>


  <label class="input-form valid">
    <span> Your Password</span>
    <input id="pwcontent" type="password" />
    <span class="pw-valid-message"></span>
  </label>

  <label class="input-form valid">
    <span> Please Confirm your Password</span>
    <input id="confirm-password" type="password">
    <span class="password-message"></span>
  </label>
</div>

HTML label 요소는 사용자 인터페이스 항목의 설명을 나타낸다.
input 태그는 label 태그와 함꼐 쓰여 input의 설명을 보충한다.
label 태그를 input 태그로 감싸면 연결되는 효과를 볼 수 있음.
id/ class 이름을 효율적으로 잘 지어야겠다 … 🙉

4. DOM 을 이용해서 상호작용 해야하는 모든 엘리먼트를 전역변수로 지정하기

const btnSignup = document.querySelector('#btn-signup')
const userId = document.querySelector('#userid')
const password = document.querySelector('#pwcontent')
const idInvalidMsg = document.querySelector("#id-invalid-message")
const confirmpassword = document.querySelector("#confirm-password")

5. 유효성 검증 함수

function moreThanLength(str) {
  return str.length >= 7; 
}
function strongPassword(str) { //영문자 및 특수문자 포함되어있는지 확인
  return /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/.test(str);
}

6. id 확인하는 함수

function handleIdcheck(){
  if(moreThanLength(userId.value)){
    idInvalidMsg.innerHTML = '<i class="fa fa-check-circle" aria-hidden="true"></i>유효한 아이디입니다:)';
    idInvalidMsg.style.color="green";
  }
  else{
    idInvalidMsg.textContent = `아이디를 7글자 이상 입력해주세요 :(`
    idInvalidMsg.style.color = "red";
  }
}

7. pw 가 8글자 이상 영문자 & 특수문자 포함 여부 확인하는 함수

function handlePasswordCheck(){
  const passwordSpan = password.parentElement.children[2];
  if(strongPassword(password.value)){
    passwordSpan.innerHTML = '<i class="fa fa-check-circle" aria-hidden="true"></i>유효한 비밀번호 입니다 :)';
    passwordSpan.style.color="green"
  }
  else{
    passwordSpan.innerHTML = '<i class="fas fa-ban"></i> 잘못된 비밀번호입니다:(';
    passwordSpan.style.color = "red";
    passwordSpan.parentElement.style.backgroundColor = "pink";
  }
}

8. pw 를 2번 입력하여 동일한지 확인하는 함수

function handleConfirmPassword() {
  const confirmPasswordSpan = confirmpassword.parentElement.children[2];
  if(confirmpassword.value === password.value) {
    confirmPasswordSpan.innerHTML = '<i class="fa fa-check-circle" aria-hidden="true"></i>동일한 비밀번호 입니다 :)'
    confirmPasswordSpan.parentElement.style.backgroundColor = "green";
  }else{
  confirmPasswordSpan.innerHTML = '<i class="fa fa-check-circle" aria-hidden="true"></i>비밀번호가 같지 않습니다 :('
  confirmPasswordSpan.parentElement.style.backgroundColor = "red"
  }
}

9. 엘리먼트와 이벤트 핸들러의 연결

btnSignup.onclick = handleBtnSignupClick;
userId.onchange = handleIdcheck;
password.onchange = handlePasswordCheck;
confirmpassword.onchange = handleConfirmPassword;

10. 완성본

스크린샷 2021-03-07 오후 11 57 11