728x90
반응형
validate
validation

 

12_01_validation01.jsp
12_01_validation_process.jsp
12_01_validation01.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<!-- 파비콘(해당 사이트를 나타내는 아이콘)에러 시 -->
<!-- <link rel="shortcut icon" href="data:image/x-icon" type="image/x-icon"> -->
<link rel="shortcut icon" href="‪C://hwork/img/globe.png">
<style>
form{width:60%; margin:0 auto; padding:10px; text-align:center;}</style>
</head>
<body>
	<form name="loginForm" action="12_01_validation_process.jsp" method="post">
	<fieldset>
		<legend>로그인</legend>
		<label for="uid">아이디&nbsp;&nbsp;:</label>
		<input type="text" name="id" id="uid" required><br>
		<label for="upw">비밀번호&nbsp;:</label>
		<input type="password" name="passwd" id="upw" required><br><br>
		<!-- <input type="submit" value="전송"> -->
<!-- 		<input type="button" value="전송"> -->
		<input type="button" value="전송" onclick="checkLogin()">
	</fieldset>
	</form>
	<script>
		function checkLogin(){
			var form = document.loginForm;
			if(form.id.value== ""){
				alert("아이디를 입력해주세요.");
				form.id.focus();
				return false;
			} else if (form.passwd.value ==""){
				alert("비밀번호를 입력해주세요");
				form.passwd.focus();
				return false;
			}
			console.log("값 가져오기:");
			console.log("아이디 : " + document.loginForm.id.value + "\n" + "비밀번호 : " + document.loginForm.passwd.value);
			form.submit();
		}
	</script>
</body>
</html>​
12_01_validation_process.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<%request.setCharacterEncoding("utf-8"); %>
	<h1>입력에 성공했습니다.</h1>
	<p>아 이 디 :
	<%= request.getParameter("id") %></p>
	<p>비밀번호 : 
	<%= request.getParameter("passwd") %></p>
</body>
</html>


12_01_validation02.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
form{width:60%; margin:0 auto; padding:10px; text-align:center;}</style>
</head>
<body>
	<form name="frm" action="12_02_validation02.jsp" method="post">
	<fieldset>
		<legend>exec()메소드 사용</legend>
		<label for="itt">제목 : </label>
		<input type="text" name="tt" id="itt" value="java server Pages" required><br>
		<input type="button" value="전송" onclick="checkForm()">
	</fieldset>
	</form>
	<script>
	/*
	유효성 검사 : 데이터가 전송되기 전 폼 입력값이 규칙에 맞게 입력되었는지 확인하는 것
	정규 표현식 : 특정한 규칙을 문자열의 집합을 표현하는데 사용하는 형식 언어
	형식 :
		1. var 변수명 = /정규표현식/[Flag];
		2. var 변수명 = new RegExp('정규표현식',['Flag']);
		flag값 : 
		i - 대문자 구분 없이 검사
		g - 문자열 내의 모든 패턴을 검사
		m - 문자열에 줄바꿈행이 있는지 검사
		
	문자열 판단 메소드
		test() : 매개 변수 값으로 전달되는 문자열이 정규표현식이 부합한지 판단하여 boolean판단
		exec() : 매개 변수 값으로 전달되는 문자열에서 정규 표현식에 문자열을 추출하여 반환함.
	*/
	function checkForm(){
		var regExp = /Java server/i; //Java server문자열이 포함되었는지 여부 판단. i:대소문자 구분없이
		//var regExp = new RegExp('Java','i');
		var str = document.frm.itt.value;
// 		var result = regExp.exec(str);
		var result = regExp.test(str);
		alert(result);
		if(result == false){
			return false;
		} else {
// 			document.frm.submit();
		}
	}
	</script>
</body>
</html>​

 

 

728x90
반응형

+ Recent posts