JSP기초 및 자바스크립트 유효성 검사

..열심히 공부하세../JSP

JSP기초 및 자바스크립트 유효성 검사

댄스댄스 2012. 5. 17. 17:09

* 유효성 검사
- 사용자에 의해 입력된 값이 제대로 입력되었는지 확인하는 작업
   주로 JavaScript가 그 역할을 담당한다
   .숫자를 제대로 입력했는가?
   .아이디가 공백인가?
   .이메일 주소에 @ 문자를 입력했는가?
   .주민번호와 이름이 일치하는 실명인가? 에 대한 유효성 검사는 불가능하다.

- JavaScript
-> jQuery로 발전하고 있음

- 자바스크립트에서 유효성검사를 해야 하는 시점
.폼이 전송될 때 할것인가?
.커서가 다음 요소로 이동될 때 할것인가?

- 자바스크립트는 이벤트를 발생시킨후 함수호출에 의해 작동되게끔 프로그램을 구현한다

* 자바스크립트의 특징
- 대소문자를 엄격히 구분한다
- 자료형이 없다 (int double String이 존재하지 않는다)
- 함수의 리턴형이 없다
- 완벽한 객체지향언어는 아니다
- 웹브라우저에 의해 해석된다
- 최상위 객체 window

* JSP페이지에 HTML 태그를 사용할 명령어가 많을 경우에는
차라리 HTML 페이지에 JSP코드를 삽입하는게 수월하다

#################################################################

sungjukForm.html---------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> 성적폼 작성 </title>

  //이름 앞뒤의 공백 제거
     //trim()함수가 없음으로 정규 표현식으로 공백제거
  uname=uname.replace(/^\s*|\s*$/g, '');

  if(uname.length==0)
  {
   //메세지상자
   alert("이름입력바람!!");
   document.myform.uname.value="";
   //uname 텍스트상자에 커서 생성
   document.myform.uname.focus();
   return; //Check()함수호출부분으로 되돌아감
  }

  //숫자로 입력이 되어 있는지 확인
  var kor=document.myform.kor.value;
  if(isNaN(kor)||kor.length==0)
  {
      //따옴표 안에 문자가 입력되면 true반환
   alert("국어점수 숫자로 제대로 입력바람!!");
   document.myform.kor.value="";
   document.myform.kor.focus();
   return;
  }

     kor=parseInt(kor);
  if(!(kor>=0 && kor<=100))
  {
   alert("국어점수 0~100사이 입력바람!!");
   document.myform.kor.value="";
   document.myform.kor.focus();
   return;
  }

  var eng=document.myform.eng.value;
  if(isNaN(eng)||eng.length==0)
  {
   alert("영어점수 숫자로 제대로 입력바람!!");
   document.myform.eng.value="";
   document.myform.eng.focus();
   return;
  }

     eng=parseInt(eng);
  if(!(eng>=0 && eng<=100))
  {
   alert("영어점수 0~100사이 입력바람!!");
   document.myform.eng.value="";
   document.myform.eng.focus();
   return;
  }

  var mat=document.myform.mat.value;
  if(isNaN(mat)||mat.length==0)
  {
   alert("수학점수 숫자로 제대로 입력바람!!");
   document.myform.mat.value="";
   document.myform.mat.focus();
   return;
  }

     mat=parseInt(mat);
  if(!(mat>=0 && mat<=100))
  {
   alert("수학점수 0~100사이 입력바람!!");
   document.myform.mat.value="";
   document.myform.mat.focus();
   return;
  }

        //스크립트를 이용해서 폼전송
  //type=submit 기능
  document.myform.submit();
}
//-->
</script>
</head>

</body>
</html>

#########################################################

sungjukok.jsp------------------

<%
//자바코드를 작성하는 부분

String uname;
int kor;
int eng;
int mat;

//사용자에게서 넘어온 자료를 보관하고 있는 클래스
//request객체

uname=request.getParameter("uname");

//type=text에서 넘어온 값을 보관하고 있는
//request객체는 문자열값으로 저장된다
//처리하고자 하는 값이 정수형이면
//형변환해서 사용해야 한다.
kor =Integer.parseInt(request.getParameter("kor"));
eng =Integer.parseInt(request.getParameter("eng"));
mat =Integer.parseInt(request.getParameter("mat"));

int aver;
aver=(kor+eng+mat)/3;

/*
1)출력방식
*/
//out.print(uname+"<br/>");
//out.print(kor+"<br/>");
//out.print(eng+"<br/>");
//out.print(mat+"<br/>");
//out.print(aver+"<br/>");

/*
2)출력방식
//결과값 table에 출력하기
out.print("<table border='1'>");
out.print("<tr>");
out.print(" <td>이름</td>");
out.print(" <td>" + uname + "</td>");
out.print("</tr>");

out.print("<tr>");
out.print(" <td>국어</td>");
out.print(" <td>" + kor + "</td>");
out.print("</tr>");

out.print("<tr>");
out.print(" <td>영어</td>");
out.print(" <td>" + eng + "</td>");
out.print("</tr>");

out.print("<tr>");
out.print(" <td>수학</td>");
out.print(" <td>" + mat + "</td>");
out.print("</tr>");

out.print("<tr>");
out.print(" <td>평균</td>");
out.print(" <td>" + aver + "</td>");
out.print("</tr>");

//문)평균 10점당 ★하나씩 출력
out.print("<tr>");
out.print(" <td>그래프</td>");
out.print(" <td>");
int su;
for(su=1;su<=aver/10;su++)
{
out.print("★");
}
out.print(" </td>");
out.print("</tr>");
out.print("</table>");

*/
%>

</body>
</html>

------------------------

* method 방식

1. get방식
   - 사용자가 입력한 값 그대로 서버로 전송된다.
   - 사용자가 입려한 값이 그대로 URL에 노출된다
   - 서로 전송되는 값의 용량의 제한이 있다.

2. post방식
   - 사용자가 입력한 값이 코드화 즉, 변환되어 서버로 전송된다
   - 주민번호, 은행계좌번호, 비밀번호등은 반드시 post방식으로 한다
   - 많은 양을 서버로 전송할 수 있다.