JavaScript에서 폼 입력값의 유효성을 검사할 때 ValidityState 객체의 rangeOverflow와 rangeUnderflow 속성을 활용하면, 사용자가 입력한 숫자가 허용된 범위 안에 있는지 손쉽게 확인할 수 있습니다.
범위 언더플로(Range Underflow)란?
입력 요소의 값이 min 속성에 지정된 최솟값보다 작을 경우, 해당 요소의 validity.rangeUnderflow 속성이 true로 설정됩니다.
범위 오버플로(Range Overflow)란?
입력 요소의 값이 max 속성에 지정된 최댓값보다 클 경우, 해당 요소의 validity.rangeOverflow 속성이 true로 설정됩니다.
다음은 JavaScript에서 이 두 속성을 사용해 입력값이 0부터 20 사이에 있는지 검사하는 예제 코드입니다.
예제 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Range Overflow & Underflow</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 20px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>Range Overflow & Range Underflow 속성</h1>
0부터 20 사이의 숫자를 입력하세요 <input type="number" class="num" min="0" max="20" step="1">
<button class="Btn">확인</button>
<h3>위 버튼을 클릭하면 입력한 숫자가 0과 20 사이에 있는지 검사합니다.</h3>
<div style="color: green;" class="result"></div>
<script>
let resEle = document.querySelector(".result");
let numEle = document.querySelector('.num');
document.querySelector(".Btn").addEventListener("click", () => {
if(numEle.validity.rangeOverflow){
resEle.innerHTML = '숫자가 범위를 초과했습니다';
}
else if(numEle.validity.rangeUnderflow){
resEle.innerHTML = '숫자가 범위보다 낮습니다';
}
else{
resEle.innerHTML = '숫자가 범위 내에 있습니다';
}
});
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
20보다 큰 숫자를 입력한 경우 — rangeOverflow가 true가 되어 "숫자가 범위를 초과했습니다"라는 메시지가 표시됩니다.
0보다 작은 숫자를 입력한 경우 — rangeUnderflow가 true가 되어 "숫자가 범위보다 낮습니다"라는 메시지가 표시됩니다.
정리
validity.rangeOverflow와 validity.rangeUnderflow 속성은 HTML 입력 요소의 min, max 속성과 연동하여 동작합니다. 별도의 조건문 없이 브라우저 자체 유효성 검사 결과를 활용할 수 있으므로, 숫자 범위 검증 로직을 간결하고 안정적으로 구현하고 싶을 때 유용하게 사용할 수 있습니다.