입력값 검증.
47_event_action.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JavaScript</title> </head> <body> <h1>Form 태그 관련 이벤트 - 처리페이지</h1> <hr> </body> </html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<h1>Form 태그 관련 이벤트 - 입력페이지</h1>
<hr>
<p>form 태그 : 사용자로 값을 입력받아 제출 이벤트(Submit Event)가 발생되면 웹프로그램을
요청하여 입력값을 전달하는 태그</p>
<p>제출 이벤트(Submit Event)가 발생되어 form 태그가 실행되기 전에 사용자 입력값에 대한
검증 기능을 자바스크립트로 구현하는 것을 권장</p>
<hr>
<!-- form 태그의 action 속성값으로 요청 웹프로그램의 URL 주소 설정 -->
<!-- => form 태그의 자식 태그로 입력태그와 제출 이벤트가 발생되는 태그가 반드시 존재 -->
<!-- => form 태그 또는 입력태그의 name 속성값은 자바스크립트에서 객체명으로 사용 가능 -->
<!-- <form action="47_event_action.html" method="post" name="loginForm"> -->
<!-- form 태그에서 action 속성(기본값 : 현재 URL 주소) 및 method 속성(기본값 : GET) 생략 가능 -->
<!-- => 자바스크립트를 이용하여 action 속성과 method 속성에 대한 속성값 설정 가능 -->
<form name="loginForm">
<table>
<tr>
<td>아이디</td>
<td><input type="text" name="id"></td>
</tr>
<tr>
<td>비밀번호</td>
<td><input type="password" name="passwd"></td>
</tr>
<!-- button 태그의 type 속성값을 [submit]으로 설정한 경우 버튼을 클릭하면 제출 이벤트
(Submit Event)가 발생되어 form 태그 실행 - 웹프로그램 요청하여 입력값 전달 -->
<!-- => 사용자 입력값에 대한 검증 불가능 -->
<!--
<tr>
<td colspan="2"><button type="submit">로그인</button></td>
</tr>
-->
<!-- button 태그의 type 속성값을 [button]으로 설정한 경우 일반 버튼으로 출력 -->
<!-- => 자바스크립트를 이용하여 버튼을 클릭할 경우 실행될 이벤트 처리 함수 등록 -->
<!-- => 이벤트 처리 함수에서 사용자 입력값 검증을 하고 검증이 성공한 경우에만
제출 이벤트(Submit Event)를 발생하여 form 태그 실행 - 웹프로그램 요청하여 입력값 전달 -->
<tr>
<td colspan="2"><button type="button" id="loginBtn">로그인</button></td>
</tr>
</table>
</form>
<script type="text/javascript">
//form 태그의 name 속성값으로 Element 객체 표현 - document 객체 표현 생략 가능
//alert(document.loginForm);//[object HTMLFormElement]
//alert(loginForm);//[object HTMLFormElement]
//입력태그(input, textarea, select)는 form 태그의 자식태그
// => 입력태그의 name 속성값으로 Element 객체 표현
//alert(loginForm.id);//[object HTMLInputElement]
//InputElement.focus() : 입력태그(Element 객체)에 입력촛점을 위치시키는 메소드
loginForm.id.focus();
document.getElementById("loginBtn").onclick=function() {
//사용자 입력값에 대한 검증 - 입력값 유무, 입력값 패턴 등 검증
//InputElement.value : 입력태그(Element 객체)의 입력값을 저장한 프로퍼티
if(loginForm.id.value=="") {//입력태그에 입력값이 없는 경우
alert("아이디를 입력해 주세요.");
loginForm.id.focus();
return;//이벤트 처리 함수 강제 종료 - 제출 이벤트 미발생 : form 태그 미실행
}
//입력값 패턴에 대한 검증은 정규표현식 이용
//자바스트립트에서는 정규표현식을 / / 안에 작성하여 RegExp 객체로 표현하여 사용
var idReg=/^[a-zA-Z]\w{5,19}$/g;
//RegExp.test(input) : RegExp 객체에 저장된 정규표현식으로 입력값에 대한 패턴을 검사하여
//형식에 맞지 않은 경우 [false]를 반환하고 형식에 맞는 경우 [true] 반환하는 메소드
if(!idReg.test(loginForm.id.value)) {//사용자 입력값이 패턴에 맞지 않는 경우
alert("아이디를 형식에 맞게 입력해 주세요.");
loginForm.id.focus();
return;
}
if(loginForm.passwd.value=="") {
alert("비밀번호를 입력해 주세요.");
loginForm.passwd.focus();
return;
}
var passwdReg=/^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[~!@#$%^&*_-]).{8,30}$/g;
if(!passwdReg.test(loginForm.passwd.value)) {
alert("비밀번호를 형식에 맞게 입력해 주세요.");
loginForm.passwd.focus();
return;
}
//태그의 속성은 Element 객체의 프로퍼티로 표현하여 속성값 변경 가능
loginForm.action="47_event_action.html";
loginForm.method="post";
//FormElement.submit() : form 태그의 제출 이벤트를 발생시키는 메소드 - form 태그 실행
loginForm.submit();
}
</script>
</body>
</html>48_submit_action.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JavaScript</title> </head> <body> <h1>Form 태그 관련 이벤트 - 처리페이지</h1> <hr> </body> </html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<h1>Form 태그 관련 이벤트 - 입력페이지</h1>
<hr>
<form action="48_submit_action.html" method="post" name="loginForm">
<table>
<tr>
<td>아이디</td>
<td><input type="text" name="id"></td>
</tr>
<tr>
<td>비밀번호</td>
<td><input type="password" name="passwd"></td>
</tr>
<tr>
<td colspan="2"><button type="submit">로그인</button></td>
</tr>
</table>
</form>
<script type="text/javascript">
loginForm.id.focus();
//form 태그에서 제출 이벤트(Submit Event)가 발생될 경우 호출되는 이벤트 처리 함수 등록
loginForm.onsubmit=function() {
if(loginForm.id.value=="") {
alert("아이디를 입력해 주세요.");
loginForm.id.focus();
/*
event.preventDefault();//태그의 기본 이벤트(Submit Event) 중지 - form 태그 미실행
return;
*/
//이벤트 처리 함수에서 [false] 반환하면 기본 이벤트 제거 및 이벤트 전달 중지되며
//이벤트 처리 함수 종료
return false;//event.preventDefault() 메소드 호출과 event.stopPropagation() 메소드 호출 명령 실행
}
var idReg=/^[a-zA-Z]\w{5,19}$/g;
if(!idReg.test(loginForm.id.value)) {//사용자 입력값이 패턴에 맞지 않는 경우
alert("아이디를 형식에 맞게 입력해 주세요.");
loginForm.id.focus();
return false;
}
if(loginForm.passwd.value=="") {
alert("비밀번호를 입력해 주세요.");
loginForm.passwd.focus();
return false;
}
var passwdReg=/^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[~!@#$%^&*_-]).{8,30}$/g;
if(!passwdReg.test(loginForm.passwd.value)) {
alert("비밀번호를 형식에 맞게 입력해 주세요.");
loginForm.passwd.focus();
return false;
}
}
</script>
</body>
</html>