Javascript 유효성 검사
오늘은 로그인 폼을 만들고 개발자가 사용자에게 부여할 유효성 검사에 대해서 알아보았다.
우리가 주로 회원가입을 할때 양식을 보면 ID 값을 필수로 입력해야한다던지, 양식에 맞게 전화번호를 입력해야한다던지
비밀번호와 비밀번호 확인란이 일치해야 한다던지. 등등을 유효성 검사라고 한다.
꼼꼼하게 하면 할수록 사용자는 불편하지만, 반대로 개발자의 입장에서는 Database에 값을 저장해야하는데, 이때 좀더 수월하게 값을 저장할수 있는 수단이기도 하다.
오히려 불편하면 불편할수록 개발자한테는 유리하다(?) 고 볼수 있다.
보통 회원가입시 비밀번호같은 민감한 개인정보가 들어있기때문에 Form 태그에서 Page를 이동할때 Method는 Post로 해야 하는게 바람직하지만, 아직 우리는 학생이고 오늘은 유효성 검사 만을 다뤘기때문에 Get 방식으로 진행하였다.
See the Pen Untitled by codeJo (@yatong) on CodePen.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<!-- cdn 방식으로 jquery 연동 -->
<!-- <script src="https://code.jquery.com/jquery-2.2.4.js"></script> -->
<!-- download방식으로 jquery 연동 -->
<!-- <script src="./js/jquery-3.6.3.js"></script> -->
<!-- google cdn 방식 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<meta charset="utf-8">
<title></title>
<style>
.c1 {
width:90px;
}
#memberFRM td, memberFRM th{
border: 1px solid #ddd;
padding: 4px;
}
#memberFRM th{
text-align: left;
width:100px;
background-color: aqua;
}
</style>
<script>
//회원가입 form의 유효성 검사를 하기위한 함수
function validChk(obj){
//console.log(obj); //object HTMLFormElements
let id = obj.mid.value; //각 요소의 value를 꺼내옴
let pwd = obj.mpwd.value;
let re_pwd = obj.re_mpwd.value;
let name = obj.mname.value;
let phone = obj.tel.value;
if(id == null || id=="") { //id의 값이 비었을때
alert('아이디를 입력해주세요');
obj.mid.focus(); //포커스 위치 지정
return false; //return문만 있으면 하단에 코드가 더 있더라도 함수를 더이상 진행하지않는다
}
if(pwd == null || pwd=="") { //pwd의 값이 비었을때
alert('비밀번호를 입력해주세요');
obj.mpwd.focus();
return false;
}
if(pwd.length < 4 || pwd.length > 12) { //글자수 4~12사이로 제한
alert('비밀번호4~12글자 이내로 작성하세요');
obj.mpwd.value=""; //비밀번호 입력된 값을 초기화
obj.mpwd.focus();
return false;
}
if(re_pwd == null || re_pwd == "") { //비밀번호 확인 필수입력 유효성검사
alert('비밀번호 확인을 입력해주세요');
obj.re_mpwd.focus();
return false;
}
if(pwd != re_pwd) { //비밀번호와 비밀번호 확인이 일치하지 않을때
alert('비밀번호가 일치하지 않습니다');
obj.re_mpwd.value=""; //비밀번호 확인란 초기화
obj.mpwd.value=""; //비밀번호란 초기화
obj.mpwd.focus(); //비밀번호란에 다시 포커스 지정
return false;
}
if(name == null || name=="") { //이름 작성 여부 검증
alert('이름을 입력해주세요');
obj.mname.focus();
return false;
}
//약관동의여부
if(!obj.agree.checked) { //체크된 상태가 아닐때
alert('동의해주세요');
obj.agree.focus();
return false;
}
let genderObj = obj.gender;
if(!genderObj[0].checked && !genderObj[1].checked) { //성별여부 체크검증
alert('성별을 체크해주세요');
return false;
}
if(phone==null || phone=="") {
alert('전화번호 필수입력사항입니다');
obj.tel.focus();
return false;
} else if(phone != "") {
let phonenumber = phone.replaceAll('-',"");
alert(phonenumber);
}
return true;
}
function selectEmail(op) { //select
let text ="";
let index = op.selectedIndex; //select의 인덱스 번호 가져오기
text = op[index].value; //해당 인덱스번호의 value를 가져와 text 변수에 대입
//alert(text);
//document.getElementById('email_d').value = text; //text를 해당 email_d에 뿌려주기
document.memberFRM.email_d.value = text; //text를 해당 email_d에 뿌려주기 form으로 접근해 대입함
if(op[index].value == null || op[index].value == "") {
//alert('직접입력');
document.getElementById('email_d').focus();
}
}
</script>
</head>
<body>
<!-- onsubmit은 submit 버튼을 눌렀을때만 수행된다 여기서 this는 submit 이 아닌 이벤트가 발생하는 form을 의미 -->
<form action="j_ok.jsp" name="memberFRM" id="memberFRM" method="get" onsubmit="return validChk(this);"> <!-- return을 부여하면서 함수가 false를 리턴하면 넘기지않는다 -->
<table>
<caption>회원가입</caption>
<tbody>
<tr>
<th class='c1'>아이디</th>
<td><input type="text" name="mid" id="mid"/></td>
<tr/>
<tr>
<th class='c1'>비밀번호</th>
<td><input type="password" name="mpwd" id="mpwd"/></td>
</tr>
<tr>
<th class='c1'>비밀번호확인</th>
<td><input type="password" name="re_mpwd" id="re_mpwd"/></td>
<tr/>
<tr>
<th class='c1'>이름</th>
<td><input type="text" name="mname" id="mname"/></td>
</tr>
<tr>
<th class='c1'>성별</th>
<td><input type="radio" name="gender" id="gender0" value="man"/><label for="gender0">남</label>
<input type="radio" name="gender" id="gender1" value="woman"><label for="gender1">여</label></td>
</tr>
<tr>
<th class='c1'>전화번호</th>
<td><input type="text" name="tel" id="tel" placeholder="01012345678형식으로 입력해주세요"/></td>
</tr>
<tr>
<th class='c1'>이메일</th>
<td><input type="text" name="email_id" id="email_id" size="12">@<input type="text" name="email_d" id="email_d" size="10"/>
<select name="email_dd" id="email_dd" onchange="selectEmail(this.options);">
<option value="">직접입력</option>
<option value="daum.net">daum.net</option>
<option value="naver.com">naver.com</option>
<option value="nate.com">nate.com</option>
<option value="kakao.com">kakao.com</option>
<option value="gmail.com">gmail.com</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;"><input type="checkbox" name="agree" id="agree"/><label for="agree">약관동의</label></td>
</tr>
<tr>
<td colspan="2" style="text-align: center;"><input type="submit" value="확인"/><input type="reset" value="취소"/></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
유효성 검사를 하면 코드가 상당히 늘어난다. 하지만 이는 잘못된 데이터가 Server에 전송되지않게 하기 위함이다.
주의깊게 봐야할것은, 먼저 Form 태그 안의 onsubmit이다. 일반적인 onclick과는 다른개념으로 submit 버튼을 눌러야만 수행되는 속성이다. Form 태그에 onclick 속성을 부여해버리면 폼 안의 어디를 누르더라도 해당 속성이 호출된다.
따라서 Form 태그와 submit 버튼은 주로 함께 사용하는 경우가 대부분이여서, onsubmit 속성이 더 적절하다.
두번째로 <select> 태그와 <option> 그리고 onchange 속성을 눈여겨 봐야한다.
Select 태그는 우리가 회원가입을 하다보면 흔히 볼수있는 Email 양식의 뒷부분을 생각하면 쉽다, 유저가 선택할수 있게 하는것이며 onchange는 Select 태그에서 Option들중에 하나를 선택하게 되면 호출되는 속성이다.
세번째로는 Form 태그에 onsubmit에 부여되어있는 함수 호출과 This이다.
생각보다 This는 HTML에서 자주 쓰이는거같다. 이벤트가 발생하는 바로 "자기 자신"을 뜻하는데
Input type Button에서 onclick으로 this를 사용하게되면 click 이벤트가 발생하는 input type을 의미하며, 지금은 Form 태그 안에서 이벤트가 발생하므로 Form태그의 HTMLObject를 매개변수로 전달한다.
그리고 함수 앞에 Return을 붙여주고 해당 함수를 보면 각각 조건에 따라서 return 문구를 두면서 False와 True를 부여하였다.
onsubmit에서 false는 Form 태그의 Action을 중지시켜준다. True일때만 Form 태그의 Action으로 다른페이지로 넘어간다.
내일은 아마 Javascirpt로 작성한 이 코드를 Jquery로 변환하는 수업을 진행하지 않을까 하는 생각이다.
'Study > 중앙정보처리학원과정' 카테고리의 다른 글
| 53일차. Model, View, Controller MVC 패턴 (0) | 2023.01.05 |
|---|---|
| 52일차. 51일차의 유효성검사를 Jquery 스타일로 변경하기 (1) | 2023.01.04 |
| 49일차. Jquery Keyup() 이벤트와 Textarea을 이용한 예제 (1) | 2023.01.01 |
| 48일차. 팀 프로젝트(Project)를 위한 ERD 작성해보기(ERD Cloud) (0) | 2022.12.31 |
| 47일차. Jquery Event On()과 event.stopPropagation() 메서드 (0) | 2022.12.30 |
