Form Validator (5) - Logic 정리

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");

- form 전체와 username, email, password, password2의 input창을 받아온다.

 

//Event Listeners
form.addEventListener("submit", function (e) {
  e.preventDefault();
  checkRequired([username, email, password, password2]);
});

- form에 submit 버튼 눌려졌을 때 event listener.

- 우선 submit을 누르면 제출 되고 다 리셋 되버리는데, 그걸 붙잡아 두기 위해(;;)

  e.preventDefault();를 해주고

- 각 요소가 들어와있는지 체크

 

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

-각 input들이 array로 들어와서 하나하나 검사하는데

만약 입력창이 비어있으면 border가 빨간색이 되고, Error 메시지를 띄운다.

아니면 success라는 의미니까 border가 초록색이 되게.

 

에러 메시지가 뜰때, 각 field의 네임도 같이 메시지에 넣어주고 싶으니까

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

input의 id 값의 첫번째 글자는 대문자로 해주고, 나머지 글자들을 뒤에 붙여준다. 

 

 

 

 

// Show input error message
function showError(input, message) {
  const formControl = input.parentElement;
  formControl.className = "form-Control error";
  const small = formControl.querySelector("small");
  small.innerText = message;
}

// Show Success Outline
function showSuccess(input) {
  const formControl = input.parentElement;
  formControl.className = "form-Control success";
}

showError함수는 input element와 message를 받는다.

form-Control div는 input element의 parentElement이기 때문에 쉽게 받아올 수 있다.

에러가 난 경우 form-Control의 클래스 이름을 error도 들어가도록 해주고

에러 메시지가 담긴 small 태그를 가져와서 small 태그의 innerText에 에러 메시지를 넣어준다.

 

showSuccess 함수는 input element만 받아와서

form-Control div에 success라는 클래스 네임도 추가해준다.

 

form-Control에 들어간 클래스 이름에 따라 CSS에서 붉은border 아니면 초록 border가 된다.

 

 

//Event Listeners
form.addEventListener("submit", function (e) {
  e.preventDefault();
  checkRequired([username, email, password, password2]);
  checkLength(username, 3, 15);
  checkLength(password, 6, 25);
});

input에 값이 입력 되었냐 안되었냐 말고도 길이가 적절한지 체크해야 한다.

 

// Check Input Length
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의 value 길이가 min 값 보다 작을때 max 값 보다 클 때, showError 함수

아니면 showSuccess

 

 

 

//Event Listeners
form.addEventListener("submit", function (e) {
  e.preventDefault();
  checkRequired([username, email, password, password2]);
  checkLength(username, 3, 15);
  checkLength(password, 6, 25);
  checkEmail(email);
});

 input창에 실제 input이 들어 와있는지, username과 password의 길이가 적절한지 테스트 했다면

email도 유효한 이메일 주소인지 테스트해야 한다.

 

 

// Check email is valid
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.");
  }
}

 정규 표현식은 stackoverflow에서 가져왔다.

input 즉 email input element의 value에서 띄어쓰기를 제거한 값을 regex test해서 true가 나오면 showSuccess

아니면 showError

 

 

 

//Event Listeners
form.addEventListener("submit", function (e) {
  e.preventDefault();
  checkRequired([username, email, password, password2]);
  checkLength(username, 3, 15);
  checkLength(password, 6, 25);
  checkEmail(email);
  checkPasswordsMatch(password, password2);
});

 

마지막으로 두 비밀번호가 일치하는지 테스트한다.

// Check passwords match
function checkPasswordsMatch(input1, input2) {
  if (input1.value !== input2.value) {
    showError(input, "Passwords do not match");
  }
}

 

 

 

---

 

 

내일 아래의 코멘트들만 이용해서 다시 혼자 처음부터 끝까지 만들어 보자.

 

 

 

- form 전체와 username, email, password, password2의 input창을 받아온다.

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

- form에 submit 버튼 눌려졌을 때 event listener.

- 우선 submit을 누르면 제출 되고 다 리셋 되버리는데, 그걸 붙잡아 두기 위해(;;)

  e.preventDefault();를 해주고

- 각 요소가 들어와있는지 체크


---------------------------------------------
-각 input들이 array로 들어와서 하나하나 검사하는데

만약 입력창이 비어있으면 border가 빨간색이 되고, Error 메시지를 띄운다.

아니면 success라는 의미니까 border가 초록색이 되게.


----------------------------------------------
에러 메시지가 뜰때, 각 field의 네임도 같이 메시지에 넣어주고 싶으니까 getFieldName 함수

input의 id 값의 첫번째 글자는 대문자로 해주고, 나머지 글자들을 뒤에 붙여준다. 



----------------------------------------------
showError함수는 input element와 message를 받는다.

form-Control div는 input element의 parentElement이기 때문에 쉽게 받아올 수 있다.

에러가 난 경우 form-Control의 클래스 이름을 error도 들어가도록 해주고

에러 메시지가 담긴 small 태그를 가져와서 small 태그의 innerText에 에러 메시지를 넣어준다.


---------------------------------------------
input에 값이 입력 되었냐 안되었냐 말고도 길이가 적절한지 체크해야 한다.
input의 value 길이가 min 값 보다 작을때 max 값 보다 클 때, showError 함수

아니면 showSuccess



---------------------------------------------
 input창에 실제 input이 들어 와있는지, username과 password의 길이가 적절한지 테스트 했다면

email도 유효한 이메일 주소인지 테스트해야 한다.



-----------------------------------------------
 정규 표현식은 stackoverflow에서 가져왔다.

input 즉 email input element의 value에서 띄어쓰기를 제거한 값을 regex test해서 true가 나오면 showSuccess

아니면 showError




---------------------------------------------
마지막으로 두 비밀번호가 일치하는지 테스트한다.



showSuccess 함수는 input element만 받아와서

form-Control div에 success라는 클래스 네임도 추가해준다.



form-Control에 들어간 클래스 이름에 따라 CSS에서 붉은border 아니면 초록 border가 된다.