[바닐라자바스크립트] form validator - javascript

✅ javascript

• 동적인 행위를 추가하기 위해 script.js 추가!!

📃 코드

// Document.getElementById("") : 주어진 문자열과 일치하는 id속성을 가진 요소를 찾아내고, 이를 나타내는 element 객체를 반환
const form = document.getElementById("form");
const username = document.getElementById("username");
const email = document.getElementById("email");
const password = document.getElementById("password");
const password2 = document.getElementById("password2");

// ✅ Show input error message
function showError(input, message) {
  const formControl = input.parentElement; // input태그의 부모 태그인 div태그 지칭
  formControl.className = "form-control error"; // className : 특정 엘리먼트 클래스 속성의 값을 가져오거나 설정
  const small = formControl.querySelector("small"); // querySelector : 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째  element 반환
  small.innerText = message; // innerText : 요소와 그 자손의 렌더링 된 텍스트 콘텐츠
}

// ✅ Show success outline
function showSuccess(input) {
  const formControl = input.parentElement; // input태그의 부모 태그인 div태그 지칭
  formControl.className = "form-control success";
}

// ✅ Check email is valid : 이메일 형식인지 확인하는 정규식
function checkEmail(input) {
  const regex = new RegExp("[a-z0-9]+@[a-z]+.[a-z]{2,3}");
  if (regex.test(input.value.trim())) {
    showSuccess(input);
  } else {
    showError(input, "Email is not valid");
  }
}

// ✅ Check required fields
function checkRequired(inputArr) {
  inputArr.forEach(function (input) {
    if (input.value.trim() === "") {
      showError(input, `${getFieldName(input)} is required`);
    } else {
      showSuccess(input);
    }
  });
}

// ✅ Get Fieldname : 첫 글자만 대문자로 만들기 위해 함수를 따로 빼서 사용
function getFieldName(input) {
  return input.id.charAt(0).toUpperCase() + input.id.slice(1);
}

// ✅ Check input length : input값 길이 체크
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);
  }
}

// Check passwords match
function checkPasswordsMatch(input1, input2) {
  if (input1.value !== input2.value) {
    showError(input2, "Passwords do not match");
  }
}
// ✅ Form Event listeners : form에서 submit타입의 요청이 들어왔을 때 실행할 함수 작성
form.addEventListener("submit", function (e) {
  e.preventDefault(); // Event.preventDefault() : 해당 이벤트에 대한 기본 동작을 실행하지 않도록 차단 - submit 기능 차단

  checkRequired([username, email, password, password2]);

  checkLength(username, 3, 15);
  checkLength(password, 6, 25);

  checkEmail(email);

  checkPasswordsMatch(password, password2);
});

📃 TIL

✔️ DOM 요소 선택 방법

querySelector : 노드의 하위 트리에서 첫 번째로 일치하는 element 노드를 반환
querySelectorAll : 노드의 하위 트리 안에서 일치하는 모든 element를 포함한 nodelist 반환
getElementsByTagName() : HTML 태그 이름을 이용하여 HTML 요소 선택
getElementById() : 아이디를 이용하여 HTML 요소를 선택
getElementsByClassName() : 클래스 이름을 이용하여 HTML 요소 선택
getElementByName() : HTML 요소의 name 속성을 이용하여 HTML 요소를 선택

✔️ EventTarget.addEventListener()

• 지정한 유형의 이벤트를 대상이 수신할 때마다 호출할 함수를 설정
• 구문
  • addEventListener(type, listener);
  • type : 수신할 이벤트 유형을 나타내는 대소문자 구분 문자열
  • listener : 지정한 이벤트를 수신할 객체, handleEvent()메서드를 포함하는 객체 또는 js함수

✔️ form.addEventListener('submit', function() {});

• form태그에서 submit유형의 요청이 왔을 때 실행할 함수들을 나열하는 코드

✔️ Event.preventDefault()

• 어떤 이벤드를 명시적으로 처리하지 않은 경우, 해당 이벤드에 대한 기본 동작을 실행하지 않도록 지정 => 해당 코드에서는 submit기능을 막았다.

✔️ checkRequired(['username', 'email', 'password', 'password2']

• input태그에 내용이 채워졌는지 여부를 확인하는 콜백함수
• 채워졌다면 showSuccess함수를, 채워지지 않았다면 showError함수를 실행
  • Element.className : 특정 element의 클래스 속성의 값을 가져오거나 설정할 수 있음
  • HTMLElement.innerText : 요소와 그 자손의 렌더링 된 텍스트 콘텐츠를 나타냄

✔️ checkLength(input, min, max)

• input값의 길이 체크 콜백함수
• showError와 showSuccess를 통해 small태그에 메시지 반환

✔️ checkEmail(input)

• 이메일 형식인지 확인하는 콜백함수
• 이메일을 확인하는 정규식이 포함되어 있음

✔️ checkPasswordsMatch(password, password2)

• 패스워드 두 개의 일치 여부를 판단하는 콜백함수

✔️ showError(input, message)

• 에러가 발생했을 때 form-control클래스를 form-control error 클래스로 변경
• small태그의 문자를 message로 변경

✔️ showSuccess(input)

• 성공했을 때 form-control 클래스를 form-control success 클래스로 변경