<!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>
