오늘의 이야기

 

JavaScript input 길이 체크 방법

이미지

 

1. 기본적인 길이 체크

JavaScript에서 input의 길이를 확인할 때는 value.length 속성을 사용합니다.

<input type="text" id="username" />
<button onclick="checkLength()">확인</button>

<script>
function checkLength() {
  const input = document.getElementById("username").value;
  const length = input.length;

  if (length < 5) {
    alert("입력값은 최소 5글자 이상이어야 합니다.");
  } else {
    alert("입력값 길이: " + length);
  }
}
</script>

2. 주요 방법

• value.length : 문자열 길이를 직접 확인


• maxlength 속성 : HTML에서 입력 가능한 최대 길이를 제한

<input type="text" maxlength="10">

• 이벤트 리스너 활용 : input 이벤트로 실시간 길이 체크

const input = document.getElementById("username");
input.addEventListener("input", () => {
  console.log("현재 길이:", input.value.length);
});

3. 활용 팁

보통은 maxlength로 기본 제한을 두고, 추가적인 검증은 value.length로 처리하는 방식이 가장 많이 쓰입니다.

---