728x90
아래에 제시된 양식을 작성하고 데이타를 입력하여 유효성검사를 실시하고,
memberJoinProcess.jsp에 전송하여 그 결괏값을 출력하도록 하여라.
폼 양식 : 회원명, 회원아이디, 회원패스워드, 회원패스워드 확인, 성별,
이메일, 휴대전화번호 관심 교과목(java, html, css, javascript)
더보기
<html>
<head>
<style type="text/css">
label {
display : block;
margin: 10px 0;
}
.rc {
display: inline;
}
span {
display: inline-block;
width: 130px;
text-align: right;
padding-right: 10px;
}
form button {
display: block;
margin-top: 20px;
cursor: pointer;
width: 100px;
height: 30px;
margin-left: 230px;
}
</style>
</head>
<body>
<form name="userForm" method="post">
<label><span>회원명 : </span><input type="text" name="userName"></label>
<label><span>회원아이디 : </span><input type="text" name="userId"></label>
<label><span>회원패스워드 : </span><input type="text" name="userPw" placeholder="특수문자를 포함한 최소 8자"></label>
<label><span>패스워드 확인 : </span><input type="text" name="userPwCheck"></label>
<span>성별 : </span>
<label class="rc"><input type="radio" name="userGender" value="남">남</label>
<label class="rc"><input type="radio" name="userGender" value="여">여</label>
<label><span>이메일 : </span><input type="text" name="userEmail"></label>
<label><span>휴대전화번호 : </span><input type="text" name="userPhone"></label>
<span>관심 교과목 : </span>
<label class="rc"><input type="checkbox" name="userSubject" value="java">java</label>
<label class="rc"><input type="checkbox" name="userSubject" value="html">html</label>
<label class="rc"><input type="checkbox" name="userSubject" value="css">css</label>
<label class="rc"><input type="checkbox" name="userSubject" value="javascript">javascript</label>
<button type="button" onclick="memberJoinCheck()">가입</button>
</form>
</body>
</html>더보기
<%
request.setCharacterEncoding("UTF-8");
String userName = request.getParameter("userName");
String userId = request.getParameter("userId");
String userPw = request.getParameter("userPw");
String userGender = request.getParameter("userGender");
String userEmail = request.getParameter("userEmail");
String userPhone = request.getParameter("userPhone");
String[] userSubject = request.getParameterValues("userSubject");
String subject = "";
for(String s :userSubject) {
subject += " / " + s;
}
%>
<html>
<head>
<style>
table {
margin: 100px auto;
}
td {
padding: 5px 10px;
}
tr td:first-child {
text-align: right;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td>회원명</td>
<td><%=userName%></td>
</tr>
<tr>
<td>회원아이디</td>
<td><%=userId%></td>
</tr>
<tr>
<td>회원패스워드</td>
<td><%=userPw%></td>
</tr>
<tr>
<td>성별</td>
<td><%=userGender%></td>
</tr>
<tr>
<td>이메일</td>
<td><%=userEmail%></td>
</tr>
<tr>
<td>휴대전화번호</td>
<td><%=userPhone%></td>
</tr>
<tr>
<td>관심교과목</td>
<td><%=subject%></td>
</tr>
</table>
</body>
</html>
처음 짠 javascript 코드
function memberJoinCheck() {
/* 폼 이름 변수 지정, action 경로 지정 */
var f = userForm;
f.action ='memberJoinProcess.jsp';
if(f.userName.value.trim() == ""){
alert('이름을 입력하세요');
f.userName.focus();
return;
}
/* 아이디 검사 */
if(f.userId.value.trim() == ""){
//db에서 중복검사도 해야됨
alert('아이디를 입력하세요');
f.userId.focus();
return;
}
/* 패스워드 검사 */
if(f.userPw.value.trim() == ""){
alert('패스워드를 입력하세요');
f.userPw.focus();
return;
}
if(f.userPw.value != f.userPwCheck.value){
alert('패스워드확인 오류입니다.');
f.userPwCheck.value="";
f.userPwCheck.focus();
return;
}
/* 성별 검사 */
var cnt = 0;
for(var i=0; i<f.userGender.length; i++){
if(f.userGender[i].checked){cnt++;}
}
if(cnt == 0){
alert('성별을 선택하세요');
f.userGender[0].focus();
return;
}
/* 이메일 검사 */
if(f.userEmail.value.trim() == ""){
alert('이메일을 입력하세요');
f.userEmail.focus();
return;
}
/* 전화번호 검사 */
if(f.userPhone.value.trim() == ""){
alert('전화번호를 입력하세요');
f.userPhone.focus();
return;
}
/* 관심과목 검사 */
cnt = 0;
for(var i=0; i<f.userSubject.length; i++){
if(f.userSubject[i].checked){cnt++;}
}
if(cnt==0){
alert('관심과목을 선택하세요');
f.userSubject[0].focus();
return;
}
/* 서버로 보내기 */
f.submit();
}
> text타입의 공백 검사와 radio,checkbox 타입의 체크갯수 검사의 작업이 반복되어 내부함수로 뺄 수 있다는 사실과, 회원 가입 버튼을 눌렀을 때 한 번 더 사용자에게 확인받는 작업이 필요하다는 사실을 알게 됨
두번째 js 코드
function memberJoinCheck() {
var f = userForm;
f.action ='memberJoinProcess.jsp';
var cnt = 0;
var checkLength = function(target){
if(target != undefined){
for(var i=0; i < target.length; i++){
if(target[i].checked) cnt++;
}
}
return cnt;
}
var checkTrim = function(target){
var alertString = null;
switch(target){
case f.userName: alertString='이름을'; break;
case f.userId: alertString='아이디를'; break;
case f.userPw: alertString='패스워드를'; break;
case f.userEmail: alertString='이메일을'; break;
case f.userPhone: alertString='전화번호를'; break;
}
if(target.value.trim() == ""){
alert(alertString+' 입력하세요');
target.focus();
return;
}
}
checkTrim(f.userName);
checkTrim(f.userId);
checkTrim(f.userPw);
if(f.userPw.value != f.userPwCheck.value){
alert('패스워드확인 오류입니다.');
f.userPwCheck.value="";
f.userPwCheck.focus();
return;
}
checkLength(f.userGender);
if(cnt == 0){
alert('성별을 선택하세요');
f.userGender[0].focus();
return;
}
checkTrim(f.userEmail);
checkTrim(f.userPhone);
checkLength(f.userSubject)
if(cnt==0){
alert('관심과목을 선택하세요');
f.userSubject[0].focus();
return;
}
if(confirm('정말 회원가입 하시겠습니까?')){
f.submit();
}> 아무 생각없이 선생님이 쓰는 코드를 따라쓰던 터라 if문 안에 쓰는 return을 쓰면 다음 alert경고창이 안뜨구나 라고 안일하게 생각했음 실행해보니 원래 다음 경고창이 안떠야 하는데 마지막 경고창까지 모두 뜸... 질문하니 return문을 쓰면 코드가 강제 종료되는데 함수를 만들어서 함수를 호출했기 때문에 값을 받아 조건문 안에 넣어주고, 그 조건문에 또 return문을 써야 내가 원하던 결과가 나올거라고 하셨음 그말을 듣고 보니 radio랑 checkbox 갯수체크했던 함수도 너무 멍청하게 썻고, switch문으로 또 반복되게 썼던 것도 매개변수로 받는게 훨씬 나을것 같다고 조언해주셔서 마지막으로 코드 수정함
세번째 js 코드
function memberJoinCheck() {
var f = userForm;
f.action ='memberJoinProcess.jsp';
var checkLength = function(target){
var cnt = 0;
if(target != undefined){
for(var i=0; i < target.length; i++){
if(target[i].checked) cnt++;
}
}
return cnt;
}
//switch로 썼던 alertString을 매개변수로 받기
var checkTrim = function(target, alertString){
if(target.value.trim() == ""){
alert(alertString+' 입력하세요');
target.focus();
return false;
}
}
//checkTrim 함수의 return값이 false이니깐
if(checkTrim(f.userName, '이름을')==false){
return;
}
if(checkTrim(f.userId, '아이디를')==false){
return;
}
if(checkTrim(f.userPw, '패스워드를')==false){
return;
}
if(f.userPw.value != f.userPwCheck.value){
alert('패스워드확인 오류입니다.');
f.userPwCheck.value="";
f.userPwCheck.focus();
return;
}
//return값이 어차피 cnt니깐 그냥 조건식에 함수호출하기
if(checkLength(f.userGender) == 0){
alert('성별을 선택하세요');
f.userGender[0].focus();
return;
}
if(checkTrim(f.userEmail, '이메일을')==false){
return;
}
if(checkTrim(f.userPhone, '전화번호를')==false){
return;
}
if(checkLength(f.userSubject)==0){
alert('관심과목을 선택하세요');
f.userSubject[0].focus();
return;
}
if(confirm('정말 회원가입 하시겠습니까?')){
f.submit();
}
}
728x90
'{ "Hello World!" }; > JavaScript／jQuery' 카테고리의 다른 글
| (JavaScript) 콜백 함수, cloneNode 동적바인딩 (0) | 2022.01.14 |
|---|---|
| (JavaScript) document 객체 (0) | 2022.01.08 |
| (JavaScript) HTML 요소이벤트 (0) | 2021.12.31 |
| (JavaScript) 내장객체 (0) | 2021.12.31 |
| (JavaScript) 브라우저 객체 모델 (0) | 2021.12.31 |