티스토리 뷰
유효성 검사
유효성 검사
사용자가 폼 페이지에서 입력한 데이터 값이 서버로 전송되기 전에 특정 규칙에 맞게 입력이 되었는지 검증하는 것을 말합니다.
예로 폼 페이지에서 나이 입력, 회원 가입 시 아이디 중복 검사, 로그인 인증 시 아이디와 비밀번호 검사, IP 패킷 검사 등을 들 수 있습니다.
유효성 검사를 위한 핸들러 함수
핸들러 함수는 폼 페이지에서 이벤트가 발생했을 때(submit을 클릭한 경우)의 유효성 검사를 위해 매핑하는 메서드로 자바스크립트를 이용해 유효성 검사를 위한 코드를 작성합니다. 핸들러 함수에서는 사용자가 폼 페이지에 입력한 데이터 값이 서버로 전송되기 전에 특정 규칙에 맞게 잘 입력했는지 검사합니다. 잘 입력이 되지 않았다면 서버로의 전송을 취소하고, 사용자에게 오류 메세지를 보여주는 역할을 합니다.
<%@ 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>
<script type="text/javascript">
function checkform()
{
//HTML-form 의 name값.input의 name값.value
alert("아이디 : " +document.loginForm.id.value + "\n"+
//HTML- form의 name값. input의 name값. value
"비밀번호 : " + document.loginForm.passwd.value);
}
</script>
<body>
<form name="loginForm">
<input type="text" name="id">
<input type="password" name="passwd">
<!-- onclick될 때 해당 함수를 실행. -->
<input type="submit" value="전송" onclick="checkform()">
</form>
</script>
</body>
</html>
기본 유효성 검사
기본 유효성 검사는 사용자가 폼 페이지의 입력 항목에 입력한 데이터의 값이 있는지 없는지 확인하고 데이터 길이, 숫자 등 기본적인 것이맞는지 검사합니다.
데이터 유무 확인하기
데이터 값의 유무에 대한 검사에서는 회원 가입 페이지에서 사용자가 아이디나 비밀번호를 입력하지 않았을 경우 거기에 해당하는 안내문을나타내주는 것을 의미합니다.
document.form[name].input[name].value==""
<%@ 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>
<script type="text/javascript">
function checkLogin()
{ //HTML-form="name"
var form = document.loginForm;
if (form.id.value == "")
{
alert("아이디를 입력해주세요")
form.id.focus();
//false를 보냄으로써 submit 이후로 실행 자체가 되지 않게끔 만든다.
//따라서 해당 값이 null일 때 alert만 뜨고, submit자체가 안되고,
//당연히 action도 안돼서 해당 process.jsp 페이지로 이동도 하지 않는다.
return false;
}
else if(form.passwd.value == "")
{
alert("비밀번호를 입력해주세요")
form.id.focus();
return false;
}
}
</script>
<body>
<form name="loginForm" action="vaildation02_process.jsp" method="post">
<p> 아이디 : <input type="text" name="id">
<p> 비밀번호 : <input type="password" name="passwd">
<!-- onclick될때 해당 함수를 실행. -->
<p><input type="button" value="전송" onclick="checkLogin()">
</form>
</body>
</html><%@ 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>
<h3>입력에 성공했습니다.</h3>
<%
request.setCharacterEncoding("utf-8");
String id = request.getParameter("id");
String passwd = request.getParameter("passwd");
%>
<p> 아이디 : <%=id %>
<p> 비밀번호 : <%=passwd %>
</body>
</html>
데이터 길이 확인하기
데이터 길이에 대한 검사는 회원가입 페이지에서 아이디, 비밀번호 등과 같은 입력 데이터의 제한 길이를 검사하는 것입니다.예를들어 아이디 및 비밀번호를 4~12자 이내로 영어와 숫자를 혼합해서 입력할 것, 첫 문자는 숫자로 시작할 수 없음 등을 검사하는 것입니다. document.form[name].input[name].value.length
숫자 여부 확인하기
숫자 여부는 isNaN()함수를 활용해서 검사를 합니다. isNaN(document.form[name].input[name].value) *isNaN()=해당 값이 숫자면 false를 반환하고, 아닐시 true를 반환합니다. + *event.keycode를 통한 아스키코드 입력을 통해 숫자, 문자(소대문자) 등을 입력을 유도할 수 있습니다. *onkeypress / onkeydown = 사용자가 키를 눌렀을 때. *onkeyup = 사용자가 키를 눌렀다 떼었을 때. *CharAt(index) = 해당 인덱스 위치의 문자를 반환해주는 메서드.
<%@ 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>
<script>
function checkLogin()
{
var form = document.loginForm;
for(i=0; i<form.id.value.length; i++)
{
var ch = form.id.value.charAt(i);
//소문자만 사용이 가능하게끔 조건식. 소문자 이외에는 alert 실행
if((ch<'a'||ch>'z') &&(ch>'A'||ch<'Z')&&(ch>'0'||ch<'9'))
{
alert("아이디는 영문 소문자만 입력 가능합니다!");
form.id.select();
return;
}
//isNaN = 해당 매개변수가 숫자면 false반환. 아니면 true반환.
if(isNaN(form.passwd.value))
{
alert("비밀번호는 숫자만 입력 가능합니다!")
form.passwd.select();
return;
}
form.submit();
}
}
</script>
<body>
<form name="loginForm" action="vaildation04_process.jsp" method="post">
<P> 아이디 : <input type="text" name="id">
<P> 비밀번호 : <input type="password" name="passwd">
<p><input type="button" value="전송" onclick="checkLogin()">
</form>
</body>
</html>
<%@ 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>
<h3>입력에 성공했습니다.</h3>
<%
request.setCharacterEncoding("utf-8");
String id = request.getParameter("id");
String passwd = request.getParameter("passwd");
%>
<p> 아이디 : <%=id %>
<p> 비밀번호 : <%=passwd %>
</body>
</html>
데이터 형식 유효성 검사
사용자가 폼 페이지의 입력 항목에 입력한 데이터 값이 특정 형태에 적합한지 검사하기 위해 정규 표현식을 사용하는 방법으로 기본 유효성검사보다 복잡합니다.
정규 표현식 사용하기
정규 표현식은 특정한 규칙을 가진 문자열의 집합을 표현하는 데 사용하는 형식 언어입니다. 즉, 문자열의 특정 형태를 찾아내기 위해 패턴으로 표현한 수식입니다. 이런 정규 표현식은 주민번호, 전화번호, 이메일과 같은 데이터 형식의 패턴이 일정한 데이터를 검사하는데 이용 하는데, 두가지 형식중 하나를 사용할 수 있습니다.
첫 번째는 객체 초기화를 사용하는 방법 : 입력된 표현식이 거의 바뀌지 않는 상수 형태일 때 주로 사용합니다.
두 번째는 RegExp 객체를 이용하는 방법 : 정규 표현식이 자주 변경될 때 사용합니다.
var 변수명 = /정규 표현식/[Flag];
var 변수명 = new RegExp('정규 표현식',['Flag']);
여기서 Flag는 정규 표현식의 끝인 / 다음에 오는 문자열로 생략이 가능하며 주로 사용하는 종류는 세가지입니다.
i - ignore Case : 문자열의 대소문자를 구별않고 검출합니다.
g - Global : 문자열 내의 모든 패턴을 검출합니다.
m - Multi Line : 문자열에 줄 바꿈 행이 있는지 검출합니다.
다국어 처리
다국어 처리
다국어 처리는 한 페이지에서 여러가지 국가의 언어를 한번에 JSP 페이지에서 JSTL의 fmt 태그를 이용해 언어별로 페이지를 따로 만들어 줄 필요 없이 바로 다국어를 지원받 을 수 있습니다.
Locale 클래스를 이용한 다국어 처리
Locale 클래스는 특정 지리적, 정치적, 문화적 지역을 나타내는 클래스로, 사용자의 지역 환경에 따라 결정되는 지역적 문화(언어, 날짜, 시간 등)의 정보를 담고 있습니다. Locale클래스는 단순한 메세지(언어 등) 뿐만 아니라 숫자, 날짜, 시간 등을 표현하는 데 사용이 됩니다.
Locale 클래스를 사용하기 위해서는 JSP 페이지에 page 디렉티브 태그의 import 속성 으로 java.util.Locale을 설정 해주고, Locale 객체의 생성은 request 내장 객체를 이용해 현재 웹 브라우저에 미리 정의된 언어나 국가 정보를 가져오는 방법이 있습니다.
java.util.Locale request.getLocale();
*인스턴스화 방법 Locale locale = new Locale("ko", "KR");
로케일 감지하기
웹 브라우저에 설정된 국가와 언어 이름을 알아내는 것을 로케일 감지라고 합니다. 해당 메서드를 이용하면 웹 브라우저에 설정된 국가나 언어에 대한 정보를 얻을 수 있 습니다.
Display가 들어가면 국가나 언어의 이름을 가져오고 나머지는 국가나 언어의 코드를 가져옵니다.
로케일 표현하기
언어 설정 -다양한 국가별 언어를 표현하기 위해 response 내장 객체의 setHeader() 메서드를 사용합니다.
response.setHeader("Content-Language","언어ex)KR");
날짜와 시간 설정 -사용자의 로케일에 따라 특정 날짜와 시간 형식을 표현하기 위해 DateFormat 클래스의 getDateTimeInstance() 메서드를 사용합니다. 해당 클래스를 사용하기 위해서는 JSP 페이지에 page 디렉티브 태그 import 속성으로 패키지 java.text.DeteFormat을 설정해줍니다.
<%
Locale locale = request.getLocale(); String date = DateFormat.getDateTimeInstance(DateFormat.FULL,DateFormat.SHORT, locale).format(new Date());
%>
out.print(date) - 출력.
통화와 숫자 설정. -사용자의 로케일에 따라 특정 통화와 숫자를 표현하기 위해 NumberFormat 클래스의 getCurrentcyInstance() 메서드를 사용합니다. 특정 비율을 표현하는 데에는 getPercentInstance() 메서드를 사용합니다. 위와 마찬가지로 클래스를 사용하기 위해서는 JSP페이지에 page 디렉티브 태그 import 속성으로 패키지 java.text.NumberFormat을 설정해줍니다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.util.Locale" %>
<!DOCTYPE html>
<%
//request로 locale()을 가져와서 해당 변수에 담는다.
Locale locale = request.getLocale();
//Locale 타입 변수를 통해 해당 언어와 국가의 코드들을 저장한다.
String displayLanguage = locale.getDisplayLanguage();
String language = locale.getLanguage();
String displayCoutry = locale.getDisplayCountry();
String country = locale.getCountry();
%>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
//출력 코드
out.println("로케일 언어 : "+displayLanguage + "<br />");
out.println("로케일 언어 코드 : "+language + "<br />");
out.println("로케일 국가 : "+displayCoutry + "<br />");
out.println("로케일 국가 코드 : "+country + "<br />");
%>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.util.Locale,java.util.Date" %>
<%@ page import="java.text.DateFormat" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
Locale locale = request.getLocale();
String date = DateFormat.getDateTimeInstance(DateFormat.FULL,DateFormat.SHORT,locale).format(new Date());
%>
<p>로케일의 날짜 형식
<p>
<% out.print(date); %>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import = "java.util.Locale,java.util.Date" %>
<%@ page import = "java.text.NumberFormat" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
Locale locale = request.getLocale();
NumberFormat curency = NumberFormat.getCurrencyInstance(locale);
NumberFormat percentage = NumberFormat.getPercentInstance(locale);
String fcurency = curency.format(1234567);
String fpercentage = percentage.format(0.25);
%>
<p> 로케일의 통화 형식 : <% out.print(fcurency); %>
<p> 로케일의 비율 형식 : <% out.print(fpercentage); %>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.text.NumberFormat" %>
<%@ page import="java.text.DateFormat" %>
<%@ page import="java.util.*" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>현재 로케일의 국가, 날짜, 통화</h3>
<%
Locale locale = request.getLocale();
Date currentDate = new Date();
DateFormat dateFormat = DateFormat.getDateInstance(DateFormat.FULL,
locale);
NumberFormat numberFormat = NumberFormat.getNumberInstance(locale);
%>
<p> 국가 : <%=locale.getDisplayCountry() %>
<p> 날짜 : <%=dateFormat.format(currentDate) %>
<P> 숫자(12345.67) : <%=numberFormat.format(12345.67) %>
</body>
</html>