본문으로 바로가기

[JSP] 유효성검사 회원가입 폼에서 파라미터 값들을 빈즈를 이용해서 넘기기

category Back-End/JSP 2018. 4. 16. 20:41

HTML + JavaScript로 만든 유효성 검사가 가능한 회원가입 폼 소스코드 입니다.


table을 감싸고 있는 form태그에 action값으로 LoginResult.jsp파일을 줘서 로그인 폼 입력후


확인버튼을 누르면 각각의 파라미터 값들이 넘어갈 수 있게 하였습니다.



Login.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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <title>회원 가입</title>
      <script language="javascript">
            function validate() {
                var re = /^[a-zA-Z0-9]{4,12}$/ // 아이디와 패스워드가 적합한지 검사할 정규식
                var re2 = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;
                // 이메일이 적합한지 검사할 정규식
 
                var id = document.getElementById("uid");
                var pw = document.getElementById("upw");
                var email = document.getElementById("uemail");
                var num1 = document.getElementById("unum1");
                var num2 = document.getElementById("unum2");
 
                var arrNum1 = new Array(); // 주민번호 앞자리숫자 6개를 담을 배열
                var arrNum2 = new Array(); // 주민번호 뒷자리숫자 7개를 담을 배열
 
                // ------------ 이메일 까지 -----------
 
                if(!check(re,id,"아이디는 4~12자의 영문 대소문자와 숫자로만 입력")) {
                    return false;
                }
 
                if(!check(re,pw,"패스워드는 4~12자의 영문 대소문자와 숫자로만 입력")) {
                    return false;
                }
 
                if(join.upw.value != join.checkupw.value) {
                    alert("비밀번호가 다릅니다. 다시 확인해 주세요.");
                    join.checkupw.value = "";
                    join.checkupw.focus();
                    return false;
                }
 
                if(email.value=="") {
                    alert("이메일을 입력해 주세요");
                    email.focus();
                    return false;
                }
 
                if(!check(re2, email, "적합하지 않은 이메일 형식입니다.")) {
                    return false;
                }
 
                if(join.uname.value=="") {
                    alert("이름을 입력해 주세요");
                    join.uname.focus();
                    return false;
                }
 
                // -------------- 주민번호 -------------
 
                for (var i=0; i<num1.value.length; i++) {
                    arrNum1[i] = num1.value.charAt(i);
                } // 주민번호 앞자리를 배열에 순서대로 담는다.
 
                for (var i=0; i<num2.value.length; i++) {
                    arrNum2[i] = num2.value.charAt(i);
                } // 주민번호 뒷자리를 배열에 순서대로 담는다.
 
                var tempSum=0;
 
                for (var i=0; i<num1.value.length; i++) {
                    tempSum += arrNum1[i] * (2+i);
                } // 주민번호 검사방법을 적용하여 앞 번호를 모두 계산하여 더함
 
                for (var i=0; i<num2.value.length-1; i++) {
                    if(i>=2) {
                        tempSum += arrNum2[i] * i;
                    }
                    else {
                        tempSum += arrNum2[i] * (8+i);
                    }
                } // 같은방식으로 앞 번호 계산한것의 합에 뒷번호 계산한것을 모두 더함
 
                if((11-(tempSum%11))%10!=arrNum2[6]) {
                    alert("올바른 주민번호가 아닙니다.");
                    num1.value = "";
                    num2.value = "";
                    num1.focus();
                    return false;
                }
 
                // ------------ 생일 자동 등록 -----------
 
                if(arrNum2[0]==1 || arrNum2[0]==2) {
                    var y = parseInt(num1.value.substring(0,2));
                    var m = parseInt(num1.value.substring(2,4));
                    var d = parseInt(num1.value.substring(4,6));
                    join.year.value = 1900 + y;
                    join.month.value = m;
                    join.day.value = d;
                }
                else if(arrNum2[0]==3 || arrNum2[0]==4) {
                    var y = parseInt(num1.value.substring(0,2));
                    var m = parseInt(num1.value.substring(2,4));
                    var d = parseInt(num1.value.substring(4,6));
                    join.year.value == 2000 + y;
                    join.month.value = m;
                    join.day.value = d;
                }
 
                // 관심분야, 자기소개 미입력시 하라는 메시지 출력
                if(join.inter[0].checked==false &&
                    join.inter[1].checked==false &&
                    join.inter[2].checked==false &&
                    join.inter[3].checked==false &&
                    join.inter[4].checked==false) {
                    alert("관심분야를 골라주세요");
                    return false;
                }
 
                if(join.self.value=="") {
                    alert("조성규씨 자기소개를 먼저 적어주세요");
                    join.self.focus();
                    return false;
                }
 
            }
 
            function check(re, what, message) {
                if(re.test(what.value)) {
                    return true;
                }
                alert(message);
                what.value = "";
                what.focus();
                //return false;
            }
      </script>
</head>
<body>
    <form name="join" onsubmit="return validate();" method="post" action="LoginResult.jsp">
    <br>
    <table border="1" align="center">
        <tr>
            <td colspan="2" align="center" bgcolor="#CED8F6"><b>회원 기본 정보</b></td>
        </tr>
 
        <tr>
            <td align="center"><b>아이디:</td>
            <td><input type="text" name="uid" id="uid" size="20" maxlength="12"></input>&nbsp4~12자의 영문 대소문자와 숫자로만 입력</td>
        </tr>
 
        <tr>
            <td align="center"><b>비밀번호:</td>
            <td><input type="password" name="upw" id="upw" size="21" maxlength="12"></input>&nbsp4~12자의 영문 대소문자와 숫자로만 입력</td>
        </tr>
 
        <tr>
            <td align="center"><b>비밀번호확인:</td>
            <td><input type="password" name="checkupw" id="checkupw" size="21" maxlength="12"></td>
        </tr>
 
        <tr>
            <td align="center"><b>메일주소:</td>
            <td><input type="text" name="umail" id="uemail" size="25"></input>&nbsp예) id@domain.com</td>
        </tr>
 
        <tr>
            <td align="center"><b>이름:</td>
            <td><input type="text" name="uname" id="uname" size="25"></input></td>
        </tr>
 
        <tr>
            <td colspan="2" align="center" bgcolor="#CED8F6"><b>개인 신상 정보</b></td>
        </tr>
 
        <tr>
            <td align="center"><b>주민등록번호:</td>
            <td><input type="text" name="unum1" id="unum1" size="10" maxlength="6">-</input><input type="password" name="unum2" id="unum2" size="10" maxlength="7"></input>
            예) 123456-1234567
            </td>
        </tr>
 
        <tr>
            <td align="center"><b>생일:</td>
            <td><input type="text" name="year" id="year" size="7"></input>년
                <select name="month" id="month">
                <OPTION>1</OPTION>
                <OPTION>2</OPTION>
                <OPTION>3</OPTION>
                <OPTION>4</OPTION>
                <OPTION>5</OPTION>
                <OPTION>6</OPTION>
                <OPTION>7</OPTION>
                <OPTION>8</OPTION>
                <OPTION>9</OPTION>
                <OPTION>10</OPTION>
                <OPTION>11</OPTION>
                <OPTION>12</OPTION>
                </SELECT>월
                <select name="day" id="day">
                <OPTION>1</OPTION>
                <OPTION>2</OPTION>
                <OPTION>3</OPTION>
                <OPTION>4</OPTION>
                <OPTION>5</OPTION>
                <OPTION>6</OPTION>
                <OPTION>7</OPTION>
                <OPTION>8</OPTION>
                <OPTION>9</OPTION>
                <OPTION>10</OPTION>
                <OPTION>11</OPTION>
                <OPTION>12</OPTION>
                <OPTION>13</OPTION>
                <OPTION>14</OPTION>
                <OPTION>15</OPTION>
                <OPTION>16</OPTION>
                <OPTION>17</OPTION>
                <OPTION>18</OPTION>
                <OPTION>19</OPTION>
                <OPTION>20</OPTION>
                <OPTION>21</OPTION>
                <OPTION>22</OPTION>
                <OPTION>23</OPTION>
                <OPTION>24</OPTION>
                <OPTION>25</OPTION>
                <OPTION>26</OPTION>
                <OPTION>27</OPTION>
                <OPTION>28</OPTION>
                <OPTION>29</OPTION>
                <OPTION>30</OPTION>
                <OPTION>31</OPTION>
                </select>일
            </td>
        </tr>
 
        <tr>
            <td align="center"><b>관심분야:</td>
            <td><input type="checkbox" name="inter" value="컴퓨터">컴퓨터</input>
                <input type="checkbox" name="inter" value="인터넷">인터넷</input>
                <input type="checkbox" name="inter" value="여행">여행</input>
                <input type="checkbox" name="inter" value="영화감상">영화감상</input>
                <input type="checkbox" name="inter" value="음악감상">음악감상</input>
            </td>
        </tr>
 
        <tr>
            <td align="center"><b>자기소개</td>
            <td><textarea rows="5" cols="80" name="self"></textarea></td>
        </tr>
    </table>
    <br><br>
 
    <p align="center">
        <input type="submit" name="submit" value="회원 가입"></input>
        <input type="reset" name="reset" value="다시 입력"></input>
    </p>
</form>
</body>
</html>
cs







넘어온 파라미터 값들을 빈즈의 get / setProperty를 이용해서 받고, 출력합니다. getProperty와 setProperty메서드는 자바빈즈 파일인(LoginTest2.java)에 구현해 놓았습니다. 해당 .java파일은 Java Resource --> src --> test패키지 아래에 생성하였습니다.


LoginResult.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
43
44
45
46
47
48
49
50
51
52
53
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<% request.setCharacterEncoding("UTF-8"); %>
<jsp:useBean id="logingo" class="test.LoginTest2" scope="request" />
<jsp:setProperty name="logingo" property="*" />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<center>
<H2>정  보</H2><hr>
<table border=1 bgcolor="yellow">
    <tr>
        <td width="150" align="center">아이디</td>
        <td width="300" align="center"><jsp:getProperty name="logingo" property="uid"/></td>
    </tr>
    <tr>
        <td width="150" align="center">비밀번호</td>
        <td width="300" align="center"><jsp:getProperty name="logingo" property="upw"/></td>
    </tr>
    <tr>
        <td width="150" align="center">메일주소</td>
        <td width="300" align="center"><jsp:getProperty name="logingo" property="umail"/></td>
    </tr>
    <tr>
        <td width="150" align="center">이름</td>
        <td width="300" align="center"><jsp:getProperty name="logingo" property="uname"/></td>
    </tr>
    <tr>
        <td width="150" align="center">주민등록번호</td>
        <td width="300" align="center"><jsp:getProperty name="logingo" property="unum1"/>-<jsp:getProperty name="logingo" property="unum2"/></td>
    </tr>
    <tr>
        <td width="150" align="center">생일 </td>
        <td width="300" align="center"><jsp:getProperty name="logingo" property="year"/>년  <jsp:getProperty name="logingo" property="month"/>월 <jsp:getProperty name="logingo" property="day"/>일</td>
    </tr>
    <tr>
        <td width="150" align="center">관심분야</td>
        <td width="300" align="center"><% for(String i : logingo.getInter()) {
            out.print(i+"\t");
        } %> </td>
    </tr>
    <tr>
        <td width="150" align="center">자기소개</td>
        <td width="300" align="center"><jsp:getProperty name="logingo" property="self"/></td>
    </tr>
</table>
</center>
</body>
</html>
cs








LoginTest2.java (Java Bean 파일)


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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
package test;
 
public class LoginTest2 {
    private String uid, upw, umail, uname, unum1, unum2, year, month, day, self;
    private String[] inter;
 
    public LoginTest2() {
        this.uid = "x";
        this.upw = "x";
        this.umail = "x";
        this.uname = "x";
        this.unum1 = "x";
        this.unum2 = "x";
        this.year = "x";
        this.month = "x";
        this.day = "x";
        this.self = "x";
    }
    
    public String getUid() {
        return uid;
    }
 
    public void setUid(String uid) {
        this.uid = uid;
    }
 
    public String getUpw() {
        return upw;
    }
 
    public void setUpw(String upw) {
        this.upw = upw;
    }
 
    public String getUmail() {
        return umail;
    }
 
    public void setUmail(String umail) {
        this.umail = umail;
    }
 
    public String getUname() {
        return uname;
    }
 
    public void setUname(String uname) {
        this.uname = uname;
    }
 
    public String getUnum1() {
        return unum1;
    }
 
    public void setUnum1(String unum1) {
        this.unum1 = unum1;
    }
 
    public String getUnum2() {
        return unum2;
    }
 
    public void setUnum2(String unum2) {
        this.unum2 = unum2;
    }
 
    public String getYear() {
        return year;
    }
 
    public void setYear(String year) {
        this.year = year;
    }
 
    public String getMonth() {
        return month;
    }
 
    public void setMonth(String month) {
        this.month = month;
    }
 
    public String getDay() {
        return day;
    }
 
    public void setDay(String day) {
        this.day = day;
    }
 
    public String[] getInter() {
        return inter;
    }
 
    public void setInter(String[] inter) {
        this.inter = inter;
    }
 
    public String getSelf() {
        return self;
    }
 
    public void setSelf(String self) {
        this.self = self;
    }
    
    
 
}
 
cs








회원가입 폼 실행 화면입니다.






파라미터 값을 넘겨받은 LoginResult.jsp의 실행화면 입니다.



'Back-End > JSP' 카테고리의 다른 글

disabled와 readonly  (0) 2018.05.06
[JSP] include액션을 이용한 화면 꾸미기 (template)  (0) 2018.04.16
[JSP] 구구단 만들기  (1) 2018.04.16
[JSP] 쇼핑몰 장바구니 기능 (DB연동 x)  (0) 2018.04.13
[JSP] (get방식) sendRedirect로 Parameter값 넘기는 방법  (4) 2018.04.12
댓글 , 엮인글
코듕
블로그 이미지 코듕 님의 블로그
MENU
CATEGORY
VISITOR 오늘 / 전체

티스토리툴바