유효성 검사(Validation)
- 사용자가 폼 페이지에서 입력한 데이터 값이 서버로 전송되기 전에
특정 규칙에 맞게 입력되었는지 검증하는 것 - 사용자가 실수로 유효하지 않는 데이터 값을 입력하면 부적합하다고 판단하여 다시 폼 페이지로 되돌아가 사용자에게 오류가 있음을 알려줌
- 예) 나이 입력시 숫자로 입력되었는지 확인, 회원 가입시 아이디 중복 검사, 로그인 인증 시 아이디와 비밀번호 검사
유효성 검사를 위한 핸들러 함수
- 폼 페이지에서 이벤트가 발생 했을 때 (submit를 클릭한 경우)의 유효성 검사를 위해 매핑하는 메소드
- 자바 스크립트를 이용하여 유효성 검사를 위한 코드를 작성
-> js는 웹 브라우져에서 유효성 검사를 처리하므로 서버에서 처리하는 것보다 속도가 빠르고, 서버에 과부하를 줄 위험이 없음 - 입력된 데이터가 유효성 검사를 통과하면 서버로 전송하고
그렇지 않으면 서버 전송을 취소하고 사용자에게 오류 메시지를 보여주는 역할을 한다.
작성해보기
- js는 문서 어느 곳에 작성해도 상관 없음.
<head>안에 넣으나,<body>안에 넣으나 그건 상관없음 - 중요한것은 js의
document부분에서.받을폼이름 .받을 값이름을 잘 맞춰줘야 한다는 것이다. 안 맞춰주면 제대로 실행을 안함
<script type="text/javascript">
function checkform() {
alert("아이디 : " + document.LoginForm.id.value + "\n" +
"비밀번호 : " + 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="submit" value="send" onclick="checkform()">
</form>
</body>이름이 잘 맞아야 이런 식으로 메시지가 잘 출력됨
기본 유효성 검사
- 사용자가 폼 페이지의 입력 항목에 입력한 데이터 값이 있는지 없는지 확인하고 데이터 길이, 숫자 등 기본적인 것이 맞는지 검사한다.
- 폼 페이지의 입력 데이터 길이를 확인하여 데이터의 유무를 검증하는 것은 기본 유효성 검사에 해당
작성해보기 01
만약 이름 입력 칸이 비워진 채 전송버튼을 누른다면, '이름을 입력하세요' 라는 팝업이 뜨도록 하는 코드
<body>
<script type="text/javascript">
function checkform() {
if ( document.frm.name.value == "") {
alert("이름을 입력해주세요")
document.frm.name.select();
}
}
</script>
<form name="frm" action="#" method="post">
<p> 이름 : <input type="text" name="name"> </p>
<p> <input type="submit" value="send" onclick="checkform()">
</form>
</body>이름 입력 없이 send 누르면 메시지가 뜸
작성해보기 02
만약 id 또는 pw를 입력하지 않고 '전송'버튼을 누른다면 입력해달라는 메시지가 뜨도록 코드 작성
<title> 기본 유호셩 검사 연습 </title>
</head>
<body>
<script type="text/javascript">
function checkform() {
if ( document.LoginForm.id.value == "") {
alert("아이디를 입력해주세요");
form.id.focus();
} else if (document.LoginForm.pw.value == ""){
alert("비밀번호를 입력해주세요");
form.pw.focus();
}
}
</script>
<form name="LoginForm" action="#" method="post" >
<p> 아이디 : <input type="text" name="id"> <br>
비밀 번호 : <input type="password" name="pw"> </p>
<input type="submit" value="전송" onclick="checkform()">
</form>
</body>1) 기본 실행창
2) 아이디는 입력했는데 비밀번호를 입력하지 않은 상황
3) 비밀번호만 입력하고 아이디 입력 안했을 때도 마찬가지
4) 둘 다 입력했을 때는 메시지 이벤트 없이 넘어간다.
작성해보기 03
전송버튼을 submit로 하지 않고, button으로 작성했을 때는 return false; 으로 값이 넘어가지 않도록 잡아주고
값이 다 들어온 상황에서는 false로 잡혀있지 않으니 document.LoginForm.submit(); 로 다음 페이지에 값을 넘겨주도록 한다.
<body>
<script type="text/javascript">
function checkform() {
if ( document.LoginForm.id.value == "") {
alert("아이디를 입력해주세요");
form.id.focus();
return false;
}
else if (document.LoginForm.pw.value == ""){
alert("비밀번호를 입력해주세요");
form.pw.focus();
return false;
}
// 만약 값이 다 넘어왔다면 전송해줘라
document.LoginForm.submit();
}
</script>
<form name="LoginForm" action="3_val_process.jsp" method="post" >
<p> 아이디 : <input type="text" name="id"> <br>
비밀 번호 : <input type="password" name="pw"> <br>
제목 : <input type="text" name="subject" > </p>
<input type="button" value="전송" onclick="checkform()">
</form>
</body>유효성 검사를 통과하면 연결 된 페이지로 값이 넘어가고, 넘어온 값을 받아주는 건 이전과 같다.
<body>
<p> 서버 쪽인 process 파일</p>
<h3> 입력 자료 성공</h3>
<%
String id = request.getParameter("id");
String pw = request.getParameter("pw");
String subject = request.getParameter("subject");
out.print("입력 id : " + id + "<br>");
out.print("입력 pw : " + pw + "<br>");
out.print("입력 제목 : " + subject + "<br>");
%>
</body>유효성 검사를 걸어놓은 아이디 / 비밀번호 부분은 미 입력시 메시지가 팝업되지만
걸어놓지 않은 제목의 경우 입력 없이도 전송이 넘어간다.
데이터 길이 확인하기
document.폼이름.변수이름.value.length 으로 조건을 확인 할 수 있다.
이름을 받는데 길이가 6~12 이내여야 한다. 그 이하 또는 이상일 경우를 검사
<body>
<script type="text/javascript">
function checkform() {
if ( ! (document.nameform.name.value.length >= 6 && document.nameform.name.value.length <= 12)) {
alert("6 ~ 12자 사이로 입력해주세요");
form.name.focus();
}
}
</script>
<form name="nameform" action="#" method="post">
<p> 이름 : <input type="text" name="name" > <br><br>
<input type="submit" value="전송" onclick="checkform()">
</form>
</body>1) 기본 실행화면에서 5글자 까지만 입력했을 때
2) 기본 실행화면에서 12자 넘게 입력했을 때
3) 길이를 올바르게 입력시 메시지 출력되지 않는다.
조건을 주고 검사하기
- 아이디 : 5~10 사이
- 비밀번호 : 8~15 사이
- 제목 : 2~25 사이
<body>
<script type="text/javascript">
function checkform() {
if (! (document.loginform.id.value.length >= 5 && document.loginform.id.value.length <= 10)) {
alert("아이디는 5~10자 내외로 입력해주세요");
document.loginform.id.select();
} else if (! (document.loginform.pw.value.length >= 8 && document.loginform.pw.value.length <= 15)) {
alert("비밀번호는 8~15자 내외로 입력해주세요");
document.loginform.pw.select();
} else if (! (document.loginform.title.value.length >= 2 && document.loginform.title.value.length <= 25)) {
alert("제목은 2~25자 내외로 입력해주세요");
document.loginform.title.select();
}
}
</script>
<form name="loginform" action="#" method="post">
<p> 아이디 : <input type="text" name="id" > <br>
비밀번호 : <input type="password" name="pw"> <br>
제목 : <input type="text" name="title"> <br> </p>
<input type="submit" value="전송" onclick="checkform()">
</form>
</body>숫자인지 확인하기
isNaN( ) 함수를 활용하여 검사한다.
isNaN(document.폼이름.변수이름.value)
의 형태이며, 인자값이 숫자이면 false를 반환하고, 숫자가 아니면 true를 반환
<script type="text/javascript">
function checkForm() {
if (!isNaN(document.check.name.value.substr(0, 1))) {
alert("이름은 숫자로 작성하실 수 없습니다");
document.check.name.select();
}
}
</script>스크립트 작성은 이런식으로 한다. 해당 name 부분에 들어온 값을 확인해서 숫자라면 alert 의 내용을 출력시킬것이다.
코드 전문은 아래와 같다.
<body>
<p> 숫자 여부 확인하기 </p>
<script type="text/javascript">
function checkForm() {
if (!isNaN(document.check.name.value.substr(0, 1))) {
alert("이름은 숫자로 작성하실 수 없습니다");
document.check.name.select();
}
}
</script>
<form name="check">
<p> 이름 : <input type="text" name="name" >
<input type="submit" value="send" onclick="checkForm()">
</form>
</body>숫자를 입력시 메시지 출력
조건을 주고 검사하기
- 이름은 숫자로 시작할 수 없다.
- 비밀번호는 숫자로만 입력해야한다.
<script type="text/javascript">
function check() {
var form = document.login;
if (!isNaN(form.name.value.substr(0, 1))) {
alert("이름은 숫자로 시작할 수 없습니다");
} else if (isNaN(form.pw.value)) {
alert("비밀번호는 숫자만 가능합니다");
}
}
</script>
<form name="login" action="#" method="post">
<p>이름 : <input type="text" name="name"> <br>
비밀 번호 : <input type="password" name="pw"> <br>
<input type="submit" value="전송" onclick="check()"> </p>
</form>
- 이름에 숫자 입력시
- 비밀번호에 문자 입력 시
- 이름에 문자입력, 비밀번호에 숫자 입력시 메시지가 출력되지 않는다.
조건을 주고 검사하기
- 아이디는 영문 소문자만 입력 가능하다
- 비밀번호는 숫자만 입력 가능하다
- 비밀번호는 5~10 자 사이여야한다.
<body>
<script type="text/javascript">
function checkLogin() {
var form = document.loginForm;
// 아이디는 영문 소문자만 입력되도록
// 1. 입력된 문자를 하나하나 검색할 것이다.
for(i=0; i<form.id.value.length; i++){
// 하나씩 ch에 담아서
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;
}
}
// 비밀번호가 숫자인지 확인하기
if (isNaN(form.pw.value)) {
alert("비밀번호는 숫자만 입력 가능합니다");
form.pw.select();
return;
// 5~10 자 이내인지 확인
} else if (!(form.pw.value.length >=5 && form.pw.value.length <=10)) {
alert("5 ~ 10자 이내로 입력해주세요");
form.pw.select();
return;
}
form.submit();
}
</script>
<form name="loginForm" action="5_process.jsp" method="post">
<p> 아이디 : <input type="text" name="id"> </p>
<p> 비밀번호 : <input type="password" name="pw"> </p>
<p> <input type="button" value="send" onclick="checkLogin()" >
</form>
</body>
- 아이디에 영문 소문자 외 다른 문자 입력시
- 비밀번호에 문자 입력시
- 비밀번호에 숫자를 5~10 외 길이로 입력시
값을 받는 5_process.jsp 파일 내용
<body>
<h4> 로그인 되었습니다 </h4>
<%
request.setCharacterEncoding("utf-8");
String id = request.getParameter("id");
String pw = request.getParameter("pw");
%>
아이디 : <%= id %>
비밀번호 : <%= pw %>
</body>
- 아이디에 영문 소문자 입력 + 비밀번호에 숫자로 6자리 입력시
4-1. 전송 버튼을 누르면 값이 잘 넘어가는 것을 확인 할 수 있다.
조건 주고 검사하기
- 아이디에만 조건 걸기
- 검사제약을 전송버튼에 걸지 말고, 아이디에 걸어주기
<body>
<script type="text/javascript">
function checkLogin() {
// 한글만 입력 가능하도록 응용한 버젼
if(!( event.keyCode >= 12392 && event.keyCode <= 12687) ){
alert("한글만 입력 가능")
}
}
</script>
<form name="loginForm" action="5_process.jsp" method="post">
<!-- 아이디에만 조건을 이런식으로 걸어줄 수도 있다. -->
<p> 아이디 : <input type="text" name="id" onkeypress="checkLogin()"> </p>
<p> 비밀번호 : <input type="password" name="pw"> </p>
<p> <input type="button" value="send" >
</form>
</body>데이터 형식 유효성 검사
- 기본 유효성 검사보다는 복잡
- 사용자가 폼 페이지의 입력 항목에 입력한 데이터 값이 특정 형태에 적함한지 검사하기 위해 정규 표현식(regular expression)을 사용하는 방법
정규 표현식
- 특정한 규칙을 가진 문자열의 집합을 표현하는데 사용하는 형식 언어
- 문자열의 특정 형태를 찾아내기 위해 패턴으로 표현한 수식
- 데이터 형식의 패턴이 전화번호, 이메일과 같이 일정한 데이터를 가지는 값을 검사하는데 사용한다.
사용형식
- 객체 초기화를 사용하는 방법
력된 표현식이 거의 바뀌지 않는 상수 형태일 때 주로 사용한다.
var 변수이름 = /정규 표현식/[Flag];
-> i : ignore Case, 문자열의 대문자와 소문자를 구별하지 않고 검출
-> g : Global, 문자열 내의 모든 패턴을 검출
-> m : Multi Line, 문자열에 줄 바꿈 행이 있는지 검출
- RegExp 객체를 이용하는 방법으로, 정규 표현식이 자주 변경될 때 주로 사용
var 변수이름 = new RegExp('정규 표현식', ['Flag']);
정규 표현식의 표현 방법
- 기본 메타 문자의 종류
- 문자 클래스의 종류
작성해보기 01
<body>
<p> 정규 표현식을 사용하여 데이터 유효성 검사히가 </p>
<script type="text/javascript">
function checkForm() {
var regExp=/Java/i;
//= var regExp = new RegExp('java', 'i');
var str = document.frm.title.value;
// exec : 매개변수 값으로 전달되는 문자열에서 정규 표현식에 부합하는 문자열을 추출, 반환한다.
var result = regExp.exec(str);
// test : 정규 표현식에 부합하는지 확인해서 true, false만 반환한다.
var re = regExp.test(str);
alert(result[0] + " " + re);
}
</script>
<form name="frm">
<p> 제목 : <input type="text" name="title">
<input type="submit" value="전송" onclick="checkForm()">
</form>
</body>작성해보기 02
<body>
<p>정규 표현식 사용해 데이터 유효성 검사</p>
<script type="text/javascript">
function checkForm() {
// regExp = 아래 조건을 무시하겠다
var regExp = /^[a-z|A-Z|ㄱ-ㅎ|ㅏ_ㅣ|가-힣]/;
var str = document.frm.title.value;
// 문자를 무시한 조건을 다시 뒤집기
// = 문자가 들어오면
if (!regExp.test(str)) {
alert("이름은 숫자로 시작할 수 없습니다.")
return;
}
}
</script>
<form name="frm">
<p>
이름 : <input type="text" name="title">
<input type="submit" value="전송" onclick="checkForm()">
</form>
</body>자주사용하는 정규식 패턴
- 숫자만 ^[0-9]*$
- 영문자만 ^[a-zA-Z]*$
- 한글만 ^[가-힣]*$
- 영문자와 숫자만 ^[a-zA-Z0-9]*$
- 이메일
/^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z]@0-9a-zA-Z.[a-zA-Z]{2,3}$/i; - 휴대전화
/^\d{3}-\d{3,4}-\d{4}$ - 주민등록번호 /\d{6}-[1-4]\d{6}$
- IP주소
([0-9]{1,3}).([0-9]{1,3}).([0-9]{1,3}). ([0-9]{1,3}) - URL
^(file|gopher|news|nttp|telnet|http|https?|ftps?|sftp):\/\/([a-z0-9]+.)+[a-z0-9]{2,4}.*$ - 날짜
^\d{1,2}\/\d{1,2}\/\d{2,4}
