WEB.JS/09.FORM_JS

chapter04 : input_check

GAWON 2023. 5. 22. 09:29 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	.success{color: blue;}
	.fail{color: red;}
</style>
<script type="text/javascript">
	function check(){
		var num = document.forms.myForm.num.value;
		var result = document.querySelector("#result");
		var msg = '';
		
		if(num > 0 && num < 11){
			// 정상
			msg = '정상 범위입니다.';
			result.classList.add('success');
			//result.classList.remove('success');	// 클래스 삭제 함수
		}else{
			// 비정상
			msg = '비정상 범위입니다.';
			//result.className = 'fail';
			result.setAttribute("class", 'fail');
		}
		
		result.innerHTML = msg;
	}
</script>
</head>
<body>
	<form action="#" name="myForm">
		1 ~ 10 사이 정수
		<input type="number" id="num" name="num">
		<input type="button" value="검증" onclick="check()">
	</form>
	<br/>
	<div id="result"></div>
</body>
</html>