quilt code

[JSP] 08 유효성 검사 본문

daily/웹프로그래밍

[JSP] 08 유효성 검사

김뱅쇼 2023. 4. 3. 20:41

1. 유효성 검사란?

사용자가 폼 페이지에서 입력한 데이터 값이 서버로 전송되기 전에 특정 규칙에 맞게 입력되었는지 검증하는 것 
사용자가 실수로 유효하지 않은 데이터값을 입력하면 부적합하다고 판단하여 다시 폼페이지로 되돌려 사용자에게 오류가 있음을 알려줌 

2. 유효성 검사를 위한 두 가지 처리 기법?

1) 기본 유효성 검사 : 사용자가 폼 페이지의 입력 항목에 입력한 데이터 값의 유무를 확인, 데이터 길이 숫자 등 기본적인 것 검사
2) 데이터 형식 유효성 검사 : 사용자가 폼 페이지의 입력 항목에 입력한 데이터 값이 특정 형태에 적합한지 검사하기 위해 정규 표현식을 사용하는 방법. 기본 유효성 검사보다 복잡

3. 유효성 검사를 위한 핸들러 함수와 폼 페이지를 작성하는 기법

핸들러 함수 : 폼 페이지에서 이벤트가 발생했을때(<submit>를 클릭한 경우)의 유효성 검사를 위해 매핑하는 메소드. 자바 스크립트를 이용하여 유효성 검사를 위한 코드 작성. 폼 페이지에서 입력한 데이터 값이 서버로 전송되기 전에 특정 규칙에 맞게 입력되었는지 검사

4. 비밀번호가 아이디를 포함되지 않도록....



1) validation01.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Jay</title>
<script type="text/javascript">
 
 
    //핸들러 함수
 
    function checkform() {
        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;
        } else if (form.passwd.value.indexOf(form.id.value) != -1) {
            alert("비밀번호는 ID를 포함할 수 없습니다.");
            angel
            angel1004
            form.passwd.focus();
            return false;
        }
        form.submit();
    }
</script>
</head>
<body>
 
<form name="loginForm" action="validation01_process.jsp" method="post">
    <p>아이디 : <input type="text" name="id" /></p>        
    <p>비밀번호 : <input type="password" name="passwd" /></p>
    <!-- 핸들러 함수 : submit을 클릭하면 실행 -->        
    <p>아이디 : <input type="submit" value="전송" onclick="checkform()" /></p>        
</form>
 
</body>
</html>
 cs


2) validation01_process.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<%@ page contentType="text/html; charset=utf-8"%>
<html>
<head>
<title>Validation</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>
 cs

5. 비밀번호로 동일한 영문이나 숫자를 3개 이상 사용하지 않도록...



validation02

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<%@ page contentType="text/html; charset=utf-8"%>
<html>
<head>
<title>Validation</title>
</head>
<script type="text/javascript">
    function checkLogin() {
        var form = document.loginForm; 
        var passwd = form.passwd.value;
        var passwdCheck = form.passwdCheck.value;
        
        let regExp = /(\w)\1\1/;  //정규식
        
        if (!regExp.test(passwd)) {
            alert("영문, 숫자는 3자 이상 연속 입력할 수 없습니다.");
            form.passwd.focus();
            return false;
        }  else if (passwd != passwdCheck) {
            alert("비밀번호를 다시 확인해주세요!");
            form.passwdCheck.focus();
            return false;
        }
        form.submit();
    }
</script>
<body>
    <form name="loginForm" method="post">
        <p> 아 이 디 : <input type="text" name="id">
        <p> 비밀번호 : <input type="text" name="passwd">
        <p> 비밀번호 확인 : <input type="text" name="passwdCheck">
        <p> <input type="button" value="전송" onclick="checkLogin()">
    </form>
</body>
</html>
 cs
**정규식 풀이)
(\w) -> 그룹, 알파벳 + 숫자 + _ 찾기
\1 : (\w)에서 하나를 가져옴
(\w)\1\1 : 3개 가져오기

6. 비밀번호가 영문, 숫자, 특수기호 조합한 8자 이상...


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<%@ page contentType="text/html; charset=utf-8"%>
<html>
<head>
<title>Validation</title>
</head>
<script type="text/javascript">
    function checkLogin() {
        var form = document.loginForm; 
        var passwd = form.passwd.value;
        var passwdCheck = form.passwdCheck.value;
        var regExpPasswd = /^(?=.*[a-zA-Z])(?=.*[!@#$%^*+=-])(?=.*[0-9]).{8,}$/;
        
        if (!regExpPasswd.test(passwd)) {
            alert("영문+숫자+특수기호 8자리 이상으로 구성하여야 합니다.");
            form.passwd.focus();
            return false;
        }  else if (passwd != passwdCheck) {
            alert("비밀번호를 다시 확인해주세요!");
            form.passwdCheck.focus();
            return false;
        }
        form.submit();
    }
</script>
<body>
    <form name="loginForm" method="post">
        <p> 아 이 디 : <input type="text" name="id">
        <p> 비밀번호 : <input type="text" name="passwd">
        <p> 비밀번호 확인 : <input type="text" name="passwdCheck">
        <p> <input type="button" value="전송" onclick="checkLogin()">
    </form>
</body>
</html>
 cs

'daily > 웹프로그래밍' 카테고리의 다른 글

[JSP] 09 다국어 처리  (0) 2023.04.05
[JSP] 07 파일 업로드  (0) 2023.03.29
[JSP] 06 폼 태그  (0) 2023.03.27
[JSP] 05장 내장 객체  (0) 2023.03.23
[웹프로그래밍] 03 디렉티브 태그  (0) 2023.03.20
'daily/웹프로그래밍' Related Articles more