JavaScript에서는 사용자가 입력한 값이 올바른 소수(십진수)인지 확인해야 하는 경우가 종종 있습니다. 이럴 때 정규 표현식(Regular Expression)을 활용하면 간단하고 효율적으로 검증할 수 있습니다.
정규 표현식 패턴 설명
이 예제에서 사용된 정규 표현식은 다음과 같습니다.
/^[-+]?[0-9]+\.[0-9]+$/
- ^ : 문자열의 시작을 의미합니다.
- [-+]? : 선택적으로 붙을 수 있는 부호(+ 또는 -)를 나타냅니다.
- [0-9]+ : 소수점 앞에 위치한 한 개 이상의 숫자를 의미합니다.
- \. : 소수점(.) 문자 그 자체를 의미합니다.
- [0-9]+ : 소수점 뒤에 위치한 한 개 이상의 숫자를 의미합니다.
- $ : 문자열의 끝을 의미합니다.
즉, 이 패턴은 부호가 있거나 없어도 되며, 반드시 소수점을 포함하고 소수점 양쪽에 숫자가 존재해야 한다는 조건을 검사합니다.
예제 코드
다음은 JavaScript에서 소수를 검증하는 전체 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 20px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>Validate decimal numbers in JavaScript</h1>
<div style="color: green;" class="result"></div>
<input type="number" class="num" />
<button class="Btn">CHECK</button>
<h3>Click the above button to check if a valid decimal number is entered or not</h3>
<script>
let resEle = document.querySelector(".result");
document.querySelector(".Btn").addEventListener("click", () => {
var str = document.querySelector(".num").value;
var regex = /^[-+]?[0-9]+\.[0-9]+$/;
var match = str.match(regex);
if (match) resEle.innerHTML = "The number given is a decimal number";
else resEle.innerHTML = "The number given is not a decimal number";
});
</script>
</body>
</html>출력 결과
위 코드를 실행하면 다음과 같은 화면을 확인할 수 있습니다.
일반 정수를 입력한 후 'CHECK' 버튼을 클릭하면 아래와 같이 소수가 아니라는 메시지가 표시됩니다.
반면, 소수를 입력한 후 'CHECK' 버튼을 클릭하면 해당 값이 유효한 소수라는 메시지가 출력됩니다.
마무리
이처럼 정규 표현식을 사용하면 복잡한 로직 없이도 입력값이 유효한 소수인지 손쉽게 판별할 수 있습니다. 필요에 따라 패턴을 수정하여 소수점 자릿수 제한 등 더 세밀한 검증 규칙을 적용할 수도 있습니다.