이클립스에서 자동으로 refresh하는 기능
window preference general workspace - refresh 체크박스 두개 체크
document : <body>와</body>사이
1. 유효성 검사란?
- 폼 페이지에서 입력한 데이터 값이 서버로 전송되기 전에 특정 규칙에 맞게 입력되었는지 검증하는 것
예) 나이 입력 시 숫자 체킹, 회원 가입 시 아이디 중복 체크, 로그인 인증 시 아이디와 비밀번호를 체킹
2. 핸들러 함수란?
- 폼 페이지에서 이벤트 발생 시 유효성 검사를 위해 매핑하는 메소드로, JavaScript/JQuery를 이용하여 유효성 검사를 하는 코드의 집합
- 서버에 과부하를 주지 않음
3. 유효성 검사의 종류
- 기본 유효성 검사 : 값의 존재 유무
- 데이터 형식 유효성 검사 : 패턴에 적합한지 여부(정규 표현식 사용)
4. 기타
- isNaN() : is Not a Number => 숫자면 false, 숫자가 아니면 true
5. 정규 표현식(암기법 : 정규 표현식 썼어? 이긍..)
-
특정한 규칙을 가진 문자열의 집합을 표현하는 데 사용하는 형식 언어
-
문자열의 특정 형태를 찾아내기 위해 패턴으로 표현
예) 주민등록번호, 전화번호, 이메일
var 변수명 = /정규 표현식/[Flag];
var 변수명 = new RegExp('정규표현식',[Flag]); -
Flag란?
정규표현식의 옵션으로 정규식으로 검색하려는 문자 패턴에 추가적인 옵션을 넣어 원하는 문자 검색 결과를 반환하도록 한다.
i : IgnoreCase(문자열의 대문자와 소문자를 구별하지 않고 검출)
g : Global(문자열 내의 모든 패턴을 검출)
m : Multi Line(문자열에 줄 바꿈 행이 있는지 검출)
**[Flag]는 생략가능. 만약 생략했다면... 한번만 검출
정규 표현식 메소드
test() : 문자열이 정규 표현식에 부합한지 판단(true/false 반환)
exec() : 문자열에서 정규 표현식에 부합된 문자열을 추출하여 반환
--> execute, 실행이라는 뜻!
정규 표현식에서 사용하는 기호(메타 문자 : 특정한 의미를 가진 문자)
^x : 문자열이 x로 시작
x$ : 문자열이 x로 종료
.x : (임의의 한 문자) 문자열이 x로 끝남
x+ : x가 한번 이상 반복
x? : x가 없다
x* : x가 0번 이상 반복(없어도 되지만 있어도 됨)
x|y : (or)x 또는 y를 찾음
(x) : ()안의 내용을 그룹화
(x)(y) : 그룹화. 자동 그룹번호 부여 -> 배열 형태
x{n} : x를 n번 반복한 문자를 찾음
x{n,m} : x를 n번 이상 m번 이하 반복한 문자를 찾음
{xy} : x 또는 y를 찾음
{^xy} : x,y를 제외하고 문자 하나를 찾음
{x-z} : x부터 z사이의 문자 중 하나를 찾음
regexp01.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<title>정규표현식</title>
<script type="text/javascript">
function checkForm(){
//var 변수명 = /정규표현식/[Flag];
var regExp = /Java/i;
var str = document.frm.title.value;
//str 문자열에서 java도 괜찮고 Java도 괜찮으니 대소문자 가리지 말고 찾아보자
var result = regExp.exec(str);
console.log(result[0]);
}
</script>
<body>
<form name = "frm">
<p>제목 : <input type="text" name="title" /></p>
<p><input type="button" value="전송" onclick="checkForm()" /></p>
</form>
</body>
</html>validation01.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<title>Validation</title>
<script type="text/javascript">
//핸들러 함수
function CheckForm() {
console.log("아이디 : " + document.loginForm.id.value);
console.log("비밀번호 : " + document.loginForm.passwd.value);
}
</script>
<body>
<form name="loginForm">
<p>아이디 : <input type="text" name="id" /></p>
<p>비밀번호 : <input type="password" name="passwd" /></p>
<p><input type="button" value="전송" onclick="CheckForm()"></p>
</form>
</body>
</html>validation02.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<title>Validation</title>
<script type="text/javascript">
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;
}
//validation02_process.jsp를 요청
form.submit();
}
</script>
</head>
<body>
<form name="loginForm" action="validation02_process.jsp" method="post">
<p>아이디 : <input type="text" name="id" /></p>
<p>비밀번호 : <input type="password" name="passwd" /></p>
<p><input type="button" value="전송" onclick="CheckLogin()" /></p>
</form>
</body>
</html>
validation02_process.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<title>Validation</title>
</head>
<body>
<h3>입력 성공</h3>
<%
request.setcharacterEncoding("UTF-8");
//파라미터 목록 중에 id와 password라는 name에 매핑되어 있는 value를 get함
String id = request.getParameter("id");
//String passwd = request.getParameter("passwd");
%>
<p>아이디 : <%=id%></p>
<p>비밀번호 : ${param.passwd}</p>
<!--request.getParameter("passwd")와 같다-->
</body>
</html>validation03.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<title>Validation</title>
<script type="text/javascript">
function CheckLogin(){
var form = document.loginForm;
if(form.id.value.length<4||form.id.value.length>12){
alert("아이디는 4~12자 이내로 입력 가능");
form.id.select();
return;
}
if(form.passwd.value.length<4){
alert("비밀번호는 4자 이상으로 입력해야 합니다.");
form.passwd.select();
return;
}
if(!isNaN(form.name.value.substr(0,1))){
alert("이름은 숫자로 시작할 수 없습니다.")
form.name.select();
return;
}
//아이디 영문소문자 체킹 form.id.value : tesTer
//t[0]e[1]s[2]T[3]e[4]r[5]
for(i=0; i<form.id.value.length;i++){
var ch = form.id.value.charAt(i);
if((ch<'a'||ch>'z')&&(ch>'A'||ch<'Z')&&(ch>'0'||ch<'9')){
alert("아이디는 영문 소문자만 입력 가능합니다!");
form.id.select();
return;
}//end if
}//end for
//나이에 문자가 들어오면 안됨
if(isNaN(form.age.value)){
alert("나이는 숫자만 입력 가능합니다.");
form.age.focus();
return false;
}
form.submit();
}
</script>
</head>
<body>
<form name="loginForm" action="validation02_process.jsp" method="post">
<p>아이디 : <input type="text" name="id" /></p>
<p>비밀번호 : <input type="password" name="passwd" /></p>
<p>이름 : <input type="text" name="name" /></p>
<p>나이 : <input type="text" name="age" /></p>
<p><input type="button" value="전송" onclick="CheckLogin()" />
</form>
</body>
</html>
