유효성 검사

  유효성 검사

▶ 유효성 검사

입력 데이터가 정해진 포맷에 맞는지 확인해야 하는 경우, 자동으로 확인해주는 작업이다.

아래의 로그인 폼에 정보를 입력하지 않았을 경우 입력해달라는 경고창이 뜰 것이다. 이게 유효성 검사이다.

 

아 이 디
비밀번호

 

<form id="memberForm" action="#" method="POST">
<table style="border:1px solid #000000;">
	<tr><td>아 이 디</td><td><input type="text" name="mId"></td>
    <td rowspan="2"><button type="button" id="mCheck">전송<br/>(로그인)</button></td></tr>
	<tr><td>비밀번호</td><td><input type="text" name="mPw"></td></tr>
</table>
</form>
<script>
	var evBtn = document.getElementById('mCheck');
	evBtn.addEventListener('click',function(){
		var form = document.getElementById('memberForm');
		var mId = form.mId;
		var mPw = form.mPw;		
		if(mId.value==''){
			alert('아이디를 입력해주세요.');
			mId.style.border='1px solid red';
            mPw.style.border='1px solid #000000';
			return;
		}
		if(mPw.value==''){
			alert('비밀번호를 입력해주세요.');
			mPw.style.border='1px solid red'
            mId.style.border='1px solid #000000';
			return;
		}
		form.submit();
	});
</script>

 

▶ 회원가입 유효성 검사

회원가입 폼을 만들때 필수적으로 필요한 것이다. 

이름
아이디
비밀번호
비밀번호확인
성별	남 여

 

<form id="myForm" action="#" method="POST">
<table style="border:1px solid #000000;">
	<tr><td>이름</td><td><input type="text" name="userName"></td></tr>
    <tr><td>아이디</td><td><input type="text" name="userId"></td></tr>
    <tr><td>비밀번호</td><td><input type="password" name="userPw"></td></tr>
    <tr><td>비밀번호확인</td><td><input type="password" name="userPw2"></td></tr>
    <tr><td>성별</td><td>남 <input type="radio" name="gender" value="남"> 
    					 여 <input type="radio" name="gender" value="여"></td></tr>
    <tr><td colspan="2"><button type="button" id="userInfoCheck">회원가입</button></td></tr>
</table>
</form>
<script>
var myForm = document.getElementById('myForm');
var userName = myForm.userName;
var userId = myForm.userId;
var userPw = myForm.userPw;
var userPw2 = myForm.userPw2;
var gender = myForm.gender;
var Btn = myForm.userInfoCheck;
Btn.addEventListener('click',function(){
	if(userName.value==''){
		alert('이름을 입력해주세요.');
		userName.focus();
		return;
	 }
	if(userId.value==''){
		alert('아이디를 입력해주세요.');
		userId.focus();
		return;
	}
	if(userPw.value==''){
		alert('비밀번호를 입력해주세요.');
		userPw.focus();
		return;
	}
	if(userPw2.value==''){
		alert('비밀번호확인을 입력해주세요.');
		userPw2.focus();
		return;
	}
	if(userPw.value!=userPw2.value){
		alert('비밀번호가 일치하지 않습니다.');
		userPw2.focus();
		return;
	}
	var n=0;
	for(var i=0; i<gender.length; i++){
		if(gender[i].checked){
			n++;
		}
	}
		if(n==0){
			alert("성별을 선택하세요.");
			gender[0].focus();
			return;
		}
	myForm.submit();
	alert('회원가입 완료');
})
</script>