연습 문제 01
유효성 검사란 무엇인가?
사용자가 폼 페이지에서 입력한 데이터 값이 서버로 전송되기 전에
특정 규칙에 맞게 입력되었는지 검증하는 것.
연습 문제 02
유효성 검사를 위한 두 가지 처리 기법을 간단히 설명하시오.
1. 기본 유효성 검사
: 폼 페이지에 입력된 데이터 값의 존재 유무를 검사
2. 데이터 형식 유효성 검사
: 폼 페이지에 입력된 데이터 값이 특정 패턴에 적합한지 여부를 검사 > 정규 표현식 사용
연습 문제 03
유효성 검사를 위한 핸들러 함수와 폼 페이지를 작성하는 기법을 설명하시오.
1. 핸들러 함수
: submit을 클릭(이벤트 발생)한 경우의 유효성 검사.
자바스크립트를 이용하여 유효성 검사를 위한 코드를 작성
속도가 빠르며 서버에 과부하를 주지 않음
2. 폼 페이지를 작성하는 기법
2-1) input 태그의 type 속성 값을 submit으로 설정, onclick 속성으로 핸들러 함수 설정
2-2) form 태그의 onsubimt 속성 값 설정
2-3) 자바스크립트를 이용하여 핸들러 함수 작성
2-4) form 태그에 name 속성 또는 forms 객체를 이용하여 핸들러 함수 가져옴 (forms 객체 이용 시 배열 형태이기에 length 속성으로 크기 알 수 있음)
연습 문제 04
비밀번호가 아이디를 포함하지 않도록 다음 조건에 맞게 JSP 애플리케이션을 만들고 실행 결과를 확인하시오.
validation01.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Validation</title>
<script type="text/javascript">
function fn_btn(){
let form = document.frm;
let id = form.id.value;
let passwd = form.passwd.value;
console.log("id",id);
console.log("passwd",passwd);
if(!id) {
alert("아이디를 입력해주세요");
return;
}
if(!passwd) {
alert("비밀번호를 입력해주세요");
return;
}
if(passwd.includes(id)){
alert("비밀번호는 ID를 포함할 수 없습니다");
return;
}
form.submit();
}
</script>
</head>
<body>
<form name="frm" action="validation_process.jsp" method="post">
<p>아이디 : <input type="text" name="id"></p>
<p>비밀번호 : <input type="text" name="passwd"></p>
<p><input type="button" onclick="fn_btn()" value="전송"></p>
</form>
</body>
</html>
validation_process.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Validation</title>
</head>
<body>
<p>아이디 : <%=request.getParameter("id")%></p>
<p>비밀번호 : <%=request.getParameter("passwd")%></p>
</body>
</html>
연습 문제 05
비밀번호로 동일한 영문이나 숫자를 3개 이상 사용하지 않도록 다음 조건에 맞게 JSP 애플리케이션을 만들고 실행 결과를 확인하시오.
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Validation</title>
<script type="text/javascript">
function fn_btn() {
let frm = document.frm;
let passwd1 = frm.passwd1.value;
let exp = /[a-zA-Z]{3,}|[0-9]{3,}/;
console.log(exp.test(passwd1));
if(exp.test(passwd1)) {
alert("영문, 숫자는 3회 이상 연속 입력할 수 없습니다");
return;
}
}
</script>
</head>
<body>
<form name="frm">
<p>아이디 : <input type="text" name="id"></p>
<p>비밀번호 : <input type="text" name="passwd1"></p>
<p>비밀번호 확인 : <input type="text" name="passwd2"></p>
<p><input type="button" onclick="fn_btn()" value="전송"></p>
</form>
</body>
</html>
연습 문제 06
비밀번호가 영문, 숫자, 특수기호를 조합한 8자 이상이 되도록 다음 조건에 맞게 JSP 애플리케이션을 만들고 실행 결과를 확인하시오.
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Validation</title>
<script type="text/javascript">
function fn_btn() {
let frm = document.frm;
let passwd1 = frm.passwd1.value;
let exp = /^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[!@#$%^&*?_]).{8,}$/;
console.log(exp.test(passwd1));
if(!exp.test(passwd1)) {
alert("영문+숫자+특수기호 8자리 이상으로 구성하여야 합니다");
return;
}
}
</script>
</head>
<body>
<form name="frm">
<p>아이디 : <input type="text" name="id"></p>
<p>비밀번호 : <input type="text" name="passwd1"></p>
<p>비밀번호 확인 : <input type="text" name="passwd2"></p>
<p><input type="button" onclick="fn_btn()" value="전송"></p>
</form>
</body>
</html>
연습 문제 07
다음 조건에 맞게 도서 웹 쇼핑몰을 위한 웹 애플리케이션을 만들고 실행 결과를 확인하시오.
