[JS] 1. Form Validator

https://vanillawebprojects.com/

 

Udemy에 올라와있는 20 Web Projects With Vanilla JavaScript 코스를 구매하였습니다. 리액트를 공부하고 개인 프로젝트를 해 보며 면서 JS 기초를 보강할 필요성을 느꼈기 때문입니다. 총 20개의 미니 프로젝트를 진행하는 강좌입니다. 

하루 1~3개 정도의 프로젝트를 해 볼 예정이고 이 카테고리는 강의를 들으며 공부한내용을 정리하는 포스팅입니다.

프로젝트 설명

첫 프로젝트는 폼 벨리데이터입니다. HTML form으로 인풋을 받아와 js로 적절성 검사를 진행합니다. 인트로 프로젝트이니만큼 간단한 html,css,js를 소개합니다.

 

폼을 작성하고 Submit버튼을 누르면 검증 결과가 보여집니다. 조건에 맞게 올바르게 입력되면 input 영역 테두리 색이 초록색, 그렇지 않으면 빨간색을띄며 에러 메세지를 출력합니다.

 

---

기억하고싶은 내용

Input의 ParentElement

<div class="form-control">
 <label for="email">email</label>
 <input type="text" id="email" placeholder="Enter email" />
 <small>Error message</small>
</div>

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

폼 안의 각각의 input은 위와 같은 html구조로 형성되었습니다. input의 부모 요소인 div에 고유한 아이디를 부여하지 않고도 해당 요소의 css를 변경 할 수 있습니다. 평소 이렇게 css를 위해 클래스 명을 변경해야 할 때 고유한 클래스 명을 부여해 하나하나 직접 불러왔습니다.

쿼리 셀렉터를 사용할 때도 무조건 document.qureySelector만 가능하다고 생각해서 늘 고유한 클래스명을 부여하고자 했는데 꼭 document가 아니더라도 가능했습니다.

DOM요소를 잘 활용하면 더 간결한 마크업과 재사용성이 높은 함수를 작성할 수 있습니다.

 

정규 표현식 

//Check email is vaild
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');
}

정규표현식을 사용하면 이메일과 같이 특정 유형으로 정해져있는 텍스트를 쉽게 검증할 수 있습니다. test메소드를 사용해서 해당 input값이 정규표현식을 만족하는지를 판별 가능합니다.

 

맨 앞글자 대문자로 표현하기

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

에러메세지의 맨 앞글자는 대문자로 표현하고자 할 때 사용한 방법입니다. 텍스트의 첫번째 글자를 대문자로 변경한것과 두번째 문자부터 끝 문자까지 분리한 문자열을 붙여서 표현합니다.

 

---

개인적으로  추가한 기능

강의 프로젝트는 submit버튼을 눌러야만 데이터 검증 결과를 확인 할 수 있습니다. 이럴 경우 계속 submit 버튼을 여러번 눌러서 인풋이 적절한지 확인 해야 하는데에서 번거로움이 생길 수 있습니다. 따라서 작성하자 마자 검증 결과를 보여줄 수 있도록 변경 해 보았습니다.