WEB.JS/09.FORM_JS

chapter01 : input_check

GAWON 2023. 5. 22. 09:29 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

	// form의 name 속성을 통해서 form 요소를 획득하기
	// 1) .표기법 : document.forms.폼name.요소name
	// 2) [] 표기법 : document.forms.["폼name"]["요소name"]

	function goLogin(){
		// 아이디는 반드시 입력되도록 하고,
		// 비밀번호는 8~16자만 입력되도록 처리
		// 그렇지 않으면 function 종료
		
		var form = document.forms.myForm;
 		
		if(form.id.value == ""){
			alert("아이디는 반드시 입력해야합니다.");
			return;
		}
		
		if(form.pw.value == "" || 
			form.pw.value.length < 8 || 
			form.pw.value.length > 16){
			
			alert("비밀번호는 반드시 8~16자 사이로 입력해야 합니다.");
			form.pw.value = "";	// 데이터 초기화
			form.pw.focus();
			
			return;
		}
		
		// 자바스크립트 코드로 데이터 submit
		form.submit();
	}
</script>
</head>
<body>
	<form action="#" name="myForm">
		아이디 <input type="text" name="id"><br/>
		<label for="uPw">비밀번호</label>
		<input type="password" name="pw" id="uPw"><br/>
		<input type="button" value="로그인" onclick="goLogin();">
	</form>
</body>
</html>