JavaScript에서 사용자가 입력한 값이 숫자인지 문자(숫자가 아닌 값)인지 확인하려면 isNaN() 함수를 활용하면 됩니다. isNaN은 "is Not a Number"의 약자로, 전달받은 값이 NaN(Not a Number, 숫자가 아님)일 경우 true를 반환합니다. 즉, isNaN()의 결과가 true라면 해당 값은 숫자가 아니라는 의미입니다.
예제 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.
css" integrity="sha384- BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
</head>
<body>
<form name="checkingInput" action="" onsubmit="return
checkInputIsNumber()">
Enter the value: <input type="text" name="txtValue">
<br>
<input type="submit" value="check">
<script>
function checkInputIsNumber(){
var value=document.forms["checkingInput"]["txtValue"].value;
if (isNaN(value)){
alert("Please Provide the input as a number");
return false;
}
}
</script>
</body>
</html>위 코드는 폼(form)에 입력된 값을 가져온 후 isNaN()으로 검사하고, 숫자가 아니면 경고창을 띄우고 제출을 중단하는(return false) 간단한 유효성 검사 예제입니다.
프로그램 실행 방법
위 프로그램을 실행하려면 파일 이름을 anyName.html(index.html)로 저장한 다음, 해당 파일을 마우스 오른쪽 버튼으로 클릭하세요. VS Code 편집기를 사용 중이라면 “Open with Live Server” 옵션을 선택하면 브라우저에서 바로 결과를 확인할 수 있습니다.
실행 결과
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
숫자가 아닌 값을 입력한 상태로 제출하면 아래와 같은 경고(alert) 메시지가 표시되며, 잘못된 입력임을 알려줍니다.
반대로 여기서는 정상적인 숫자 값인 100을 입력해 보았습니다.
이후 check 버튼을 클릭하면 입력한 값이 아래와 같은 형태의 쿼리 문자열(query string)로 전달되는 것을 확인할 수 있습니다.
?txtValue=yourValue.
유효성 검사를 통과했기 때문에 페이지가 정상적으로 제출되며, 주소창에 위와 같은 쿼리 문자열이 함께 표시됩니다.