[javascript] input에서 입력값 유무는 trim().length 로 확인하자

0. 들어가며

로그인창, 회원가입단에서 사용자가 입력창에 값을 넣었는지 안넣었는 지를 확인해야 한다.

이때, trim().length로 확인하지 않으면 의미없는 띄어쓰기를 입력해도 텍스트로 인식한다.

 

 

 

1. tirm()

trim은 입력값 앞 뒤의 공백을 제거하는 메소드이다.

const word = "     hello     "

word.trim() === "hello"

 

 

 

2. 예시

아래는 사용자가 input 창에 값을 입력했는지 안했는지 판단하여 리스트에 추가하는 함수다. 

 

조건

1) 아무 값도 입력하지 않으면 값 입력하라는 모달을 띄운다.

2) Age를 0이하 즉, 음수로 입력하면 나이를 잘못입력했다는 모달을 띄운다.

3) 이름, 나이(음수 아님) 모두 입력한 경우만 제출 함수가 실행

 

1번 컨디션

  const handleUserInfo = (event) => {

    event.preventDefault()

    if (userName && userAge > 0) {

      handleComplete();

    } else if (userAge < 0) {

      setWrong(true);

    } else {

      setIncomplete(true);

    }

};

=> 정상적으로 작동은 되나 '이름'에 의미없는 띄어쓰기를 입력해도 input 값이 들어왔다고 인식.

 

 

 

2번 컨디션 (trim().length 로 확인)

  const handleUserInfo = (event) => {

    event.preventDefault();

    if (userName.trim().length === 0 || userAge.trim().length === 0) {

      setIncomplete(true);

    } else if (+userAge < 0) {

      setWrong(true);

    } else {

      handleComplete();

    }

  };

=> '이름'에 의미없는 띄어쓰기를 입력한 것도 입력 안했다고 인식.

 

 

 

 

※추가로 userAge에 + 가 붙어있는데 숫자로 이루어진 문자열 변수에 +를 붙이면 Number로 타입이 바뀜.

  console.log(typeof userAge); // string

  console.log(typeof +userAge); // number