note

입력양식의 유효성 검사 본문

JavaScript/기본

입력양식의 유효성 검사

투한 2012. 3. 19. 09:44








불일치시








<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
	window.onload = function () {
		//이벤트를 연결합니다.
		document.getElementById('my_form').onsubmit = function () {
			//변수를 선언합니다.
			var pass = document.getElementById('pass').value;
			var pass_check = document.getElementById('pass_check').value;
			//비밀번호가 같은지 확인합니다.
			if(pass == pass_check){
				alert('성공');
			}else{
				alert('다시 입력해주세요.');
				return false;
			}
		};
	};
	
</script>
</head>
<body>
	<form id="my_form">
		<label for="name">이름</label><br/>
		<input type="text" name="name" id="name" /><br/>
		<label for="pass">비밀번호</label><br/>
		<input type="password" name="pass" id="pass" /><br/>
		<label for="pass_check">비밀번호 확인</label><br/>
		<input type="password" id="pass_check" /><br/>
		<input type="submit" value="제출" />
	</form>
</body>
</html>


비밀번호 체크시 return false에 걸리면 submit이 실행되지 않아서 이벤트가 발생되지 않는다


저작자표시 비영리 변경금지 (새창열림)

'JavaScript > 기본' 카테고리의 다른 글

표준 이벤트 모델  (0) 2012.03.19
이벤트 연결  (0) 2012.03.19
이벤트 객체  (0) 2012.03.16
이벤트 발생 객체의 스타일 변경  (0) 2012.03.16
이벤트 핸들러 안에서 this 키워드  (0) 2012.03.16
'JavaScript/기본' Related Articles more