회원가입, 수정 시 유효성 검사하기

충찌·2021년 12월 26일
0

JSP

목록 보기
4/4
post-thumbnail



회원가입과 수정할 때 형식을 맞춰줘야하니까 유효성검사를 자바스크립트로 추가했다.
빈칸인 값은 .length==0으로 하지않고 input태그에 required값을 입력해 필수 입력항목으로 만들어줬다.
유효성 검사는 정규식 표현으로 진행했다.

1. 유효성검사하기 - addMember.jsp와 updateMember.jsp에 추가





<script>
function checkForm(){
	//validation 체크 
	var regExpId = /^[a-z|A-z|ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/;
	var regExpPassword = /^[0-9]+$/;
	var regExpName = /^[가-힣]+$/;
	var regExpEmail = /^[a-zA-Z0-9]([-_\.]?[0-9a-zA-Z])*@[a-zA-Z0-9]([-_\.]?[a-zA-Z0-9])*\.[a-zA-Z]{2,3}$/i;
	var regExpPhone = /^\d{3}-\d{3,4}-\d{4}$/;
	
	var id = document.newMember.id.value;
	var password = document.newMember.password.value;
	var name = document.newMember.name.value;
	var email = document.newMember.mail1.value+"@"+document.newMember.mail2.value;
	var phone = document.newMember.phone1.value+document.newMember.phone2.value
    		   +document.newMember.phone3.value;
	
	if(!regExpId.test(id)){
		alert("아이디는 문자로 시작해주세요.");
		document.newMember.id.focus();
		id="";
		return false;
	}
	
	if(!regExpPassword.test(password)){
		alert("비밀번호는 숫자만 입력해주세요.");
		document.newMember.password.focus();
		password="";
		return false;
	}
	
	if(!regExpName.test(name)){
		alert("이름은 한글만 입력해주세요.");
		document.newMember.name.focus();
		name="";
		return false;
	}
	
	
	if(!regExpEmail.test(email)){
		alert("이메일 입력을 확인해주세요.");
		document.newMember.email1.focus();
		document.newMember.email1.value="";
		document.newMember.email2.value="";
		return false;
	}
	
	if(!regExpPhone.test(phone)){
		alert("연락처 입력을 확인해주세요.");
		document.newMember.phone2.focus();
		document.newMember.phone2.value="";
		document.newMember.phone3.value="";
		return false;
	}
 return true;
}
</script>



처음에 js 페이지를 따로 만들어주고 script type="text/javascript" src="./resources/js/validation.js" 태그를 입력했는데
검사를 하지않고 다음페이지로 넘어가서 안되는 이유를 찾지못하고 일단 jsp페이지에 직접 값을 넣어줬다.



결과는 👍🏻





profile
벨로그? 난 켈로그

0개의 댓글