시작

역시 JavaScript 부분은 막 이론을 땐 나에게는 살짝 어색하고 메서드가 혼동되고 잘 기억이 안났지만 그래도 전 프로젝트를 할 때보다는 익숙해진 기분이 든다.

JavaScript part

자바스크립트를 이용해 Login Form을 동적인 페이지로 만들어보고자 한다.

JS로 구현할 기능들

'Login Form'은 이러한 기능들을 가지고 있어야 한다.

• 입력 에러시 에러 내용을 small 태그에 띄우는 역할
• 정상적으로 입력 시, 클래스 이름에 success 추가
• 입력한 이메일 형식을 정규식(RegExp)를 통해 검사하기
• input안에 입력하였는지 유무 판별
• 입력한 값의 길이가 적절한지 판별
• 다시 입력한 비밀번호가 일치하는지 확인
• submit 클릭 시, 위에서 말했던 기능들이 실행됨.

변수

JavaScript에서 사용할 변수는 이렇게 5가지이다.

• username, email, password, password2, form
  

잘못 입력했을 경우

input의 parent인 form-control은 label, input, small을 가지고 있기 때문에 formControl = input.parentElement를 해주었다.
또한 다른 함수에서 message를 지정해 넘겨주면 해당 message를 small 태그의 innerText로 넣어주도록 기능을 만들었다.

 function showError(input, message) {
   const formControl = input.parentElement;
   formControl.className = 'form-control error';
   const small = formControl.querySelector('small');
   small.innerText = message;
 }

정상적으로 입력했을 경우

위에서 설명했던 함수와 유사하지만 매개변수가 하나이므로 그만큼 내용도 간단하다.

function showSuccess(input) {
  const formControl = input.parentElement;
  formControl.className = 'form-control success';
}

이메일 형식이 정상적인지 확인

정규식에서 /^(([^<>()\[\]\\.,;:\s@"]+ 부분은 ^, <, >, (, ), [, ], \, ., ,, ;, :, ,@, "로 시작한다는 의미이다.
^x는 문자열이 x로 시작한다는 의미이다. 이와 반대로 x$는 문자열이 x로 끝난다는 의미이다.
참고 사이트: https://droptable.tistory.com/65

RegExp.prototype.test()는 주어진 문자열이 정규 표현식을 만족하는지 판별하고, 그 여부를 true 또는 false로 반환한다.
따라서, test 메서드를 통해 주어진 이메일이 정규식과 같은 형태인지 확인한 후, 조건문을 파악한다.

function checkEmail(input) {
  const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  if (re.test(input.value.trim()) {
    showSuccess(input);
  } else{
  	showError(input, 'Email is not valid');
}

입력하였는지 확인하기

inputArr자리에는 username, email, password 등의 input태그가 들어간다.
forEach를 통해 반복문을 돌려 각각의 input값이 채워졌는지 조건문으로 확인한다.

function checkRequired(inputArr){
  let isRequired = false;
  inputArr.forEach(input => {
    if (input.value.trim() === ''){
      showError(input, `${getFieldName(input)} is required`);
      isRequired = true;
    } else{
      showSuccess(input);
    }
  });
  return is Required;
}

input에 입력한 문자열(or 숫자)의 길이 확인하기

checkLength함수는 비교적 간단하다. input의 value값의 길이를 확인해서 max, min 조건으로 확인해 showError를 실행한다.

function checkLength(input, min ,max){
  if(input.value.length < min){
    showError(
      input,
      `${getFieldName(input)} must be at least ${min} characters`
    );
  } else if(input.value.length > max){
    showError(
      input,
      `${getFieldName(input)} must be less than ${max} characters`
    );
  } else{
    showSuccess(input);
  }
}

비밀번호가 일치하는지 확인하기

input의 password와 password2의 값이 일치하는지 확인한다.

function checkPasswordsMatch(pw1, pw2){
  if(pw1.value !== pw2.value){
    showError(pw2, 'Password do not match');
  }
}

getFieldName

뭔가 복잡해 보이지만 생각 의외로 간단하게 id의 첫 글자를 대문자로 만들어 주는 역할을 한다.
charAt(0).toUpperCase()를 통해 첫 글자를 대문자로 만들어주고
이후, slice(1)을 통해 2번째 글자를 그대로 이어준다.

function getFieldName(input){
  return input.id.charAt(0).toUpperCase() + input.id.slice(1);
}

submit 클릭시 발생하는 이벤트

마지막으로 위에서 만든 모든 함수들을 실행시켜주는 이벤트 함수를 만든다.
submit 클릭 시 이벤트가 실행되도록 만들어준다.

e.preventDefault()는 submit버튼 클릭 시, 발생하는 이벤트의 전파를 막아주는 역할을 한다. 만약 이러한 메서드가 없으면, button이 클릭되며 페이지가 초기화 된다.

form.addEventListener('submit', e=>{
  e.preventDefault();
  if(!checkRequired([username, email, password, password2])){
    checkLength(username, 3, 15);
    checkLength(password, 6, 15);
    checkEmail(email);
    checkPasswordsMatch(password, password2);
  }
});